Получая значение select, добавьте его в атрибут html

Question

Получая значение select, добавьте его в атрибут html

0

Есть ли способ получить выбор, который сделает клиент, а затем добавить его к пользовательскому атрибуту html5?

У меня есть выбор mnu, динамически исходящий из базы данных, которая создает следующий HTML:

  <select name="options">
    <option value="2 Tier &pound;250.00">2 Tier &pound;250.00</option>
    <option value="3 Tier &pound;350.00">3 Tier &pound;350.00</option>
    <option value="4 Tier &pound;450.00">4 Tier &pound;450.00</option>
   </select>

Таким образом, в основном, если клиент выбирает вариант один, я хочу захватить значение, вычеркивая текст и просто получая цифры, а не обновляя страницу или перемещаясь где-нибудь еще (пока), добавьте это значение в пользовательский атрибут I; m, используя для Корзина jQuery.

 <div class="item" data-id="123" data-name="Some product name" data-price="VALUE_HERE">

Я бы предположил jQuery, чтобы сделать это, но не уверен, как это искать какую-то помощь, примеры того, как это сделать, пожалуйста.

the_unforgiven_II 03 май 2014, в 12:08

Источник

Теги:

php

javascript

jquery

html5

laravel-4

2 ответа

0

Ну вот:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("select[name=options]").change(function() {
        var element = $(this).attr("rel");
        var tmp = $(this).val().match(/[-+]?[0-9]*\.?[0-9]+/g);
        var value = tmp[tmp.length-1];

        $('#'+element).attr('data-price',value);
    })
});
</script>
</head>
<body>
<select name="options" rel="item-1">
    <option value="2 Tier &pound;250.00">2 Tier &pound;250.00</option>
    <option value="3 Tier &pound;350.00">3 Tier &pound;350.00</option>
    <option value="4 Tier &pound;450.00">4 Tier &pound;450.00</option>
</select>

<div class="item" id="item-1" data-name="Some product name" data-price="" />
</body>
</html>

Tanatos 03 май 2014, в 06:57

Ещё вопросы

maj · Accepted Answer · 2014-05-03T08-34-00.000Z

Это то, что вы смотрите?

FIDDLE

 <select name="options">
    <option value="2 Tier &pound;250.00">2 Tier &pound;250.00</option>
    <option value="2 Tier &pound;250.00">3 Tier &pound;350.00</option>
    <option value="2 Tier &pound;250.00">4 Tier &pound;450.00</option>
   </select>
 <div class="item" data-id="123" data-name="Some product name" data-price="VALUE_HERE">

Javascript

$("select").change(function(){
   selectedValue = $(this).val();     
//alert(selectedValue);
var p = selectedValue.indexOf("£");
rest = selectedValue.substring(p+1);
$(".item").attr("data-price",rest)}).change();

Это один, но как я могу удалить текст, & pound; подпишите и просто возьмите номер 250,00, как, например, так.
Можем ли мы просто указать значения параметров, такие как <option value = "250.00"> <option value = "350.00"> и т. Д., А не текст?
Нет, он был извлечен из базы данных, так что нужно как-то удалить его. Я пробовал это $ (this) .val (). Match (/ [- +]? [0-9] * \.? [0-9] + / g); и это действительно работает, но добавляет два элемента, а не один.
Можете ли вы проверить текущий код в jsfiddle. Регулярное выражение может быть медленнее
Легенда! Это выглядит именно то, что мне было нужно, спасибо мужчина!
после .change () мне нужно быстро обновить страницу, чтобы измененная опция выбора была передана в атрибут data-price. Как это сделать?