获取选择值,然后添加到自定义html属性


Getting select value then add to custom html attribute

是否有一种方法,我可以得到选择的客户会使然后将其添加到自定义html5属性?

我有一个选择菜单动态来自数据库,产生以下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>

所以基本上,如果客户选择选项1,我想获取值剥离文本,只获得数字,而不是刷新页面或移动到其他地方(只是)将这个值添加到一个自定义属性,我正在使用jQuery购物车

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

我认为jQuery可以做到这一点,但不确定如何,所以寻找一些帮助,关于如何做到这一点的例子请。

你在看这个吗?

小提琴

 <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();

给你:

<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>