Javascript jQuery使用数据src来更改div的值

我正在使用一个

下拉列表，我想更改div

#price

的值，但是我需要使用值选择器将数据发送到另一个表单。我的问题是，我可以在

value=”“

中使用两个选项，还是可以使用另一个选择器，如下面的

data=“

<select id="choose">
    <option value="test1" data="4.00">Test1</option>
    <option value="test2" data="6.00">Test2</option>
    <option value="test3" data="7.00">Test3</option>
</select>
<div id="price"></div>

测试1
测试2
测试3

下面的jQuery只返回test1、test2等，如何返回自定义数据值

<script type="text/javascript">
  jQuery('#choose').change(function(event) {
     jQuery('#price').html(jQuery('#choose').val());
  });
</script>

jQuery（'#choose'）.change（函数（事件）{
jQuery（'#price'）.html（jQuery（'#choose'）.val（））；
});

---

感谢您的帮助。

您可以使用查找选定的选项元素，然后获取数据属性的值

jQuery('#choose').change(function (event) {
    jQuery('#price').html(jQuery('#choose option:selected').attr('data'));
}).change(); //to iniitize the value on load

<select id="choose">
    <option value="test1" data-value="4.00">Test1</option>
    <option value="test2" data-value="6.00">Test2</option>
    <option value="test3" data-value="7.00">Test3</option>
</select>
<div id="price"></div>

演示：

---

但最好使用data-*属性

jQuery('#choose').change(function (event) {
    jQuery('#price').html(jQuery('#choose option:selected').attr('data'));
}).change(); //to iniitize the value on load

<select id="choose">
    <option value="test1" data-value="4.00">Test1</option>
    <option value="test2" data-value="6.00">Test2</option>
    <option value="test3" data-value="7.00">Test3</option>
</select>
<div id="price"></div>

---

演示：

您可以使用找到选定的选项元素，然后获取数据属性的值

jQuery('#choose').change(function (event) {
    jQuery('#price').html(jQuery('#choose option:selected').attr('data'));
}).change(); //to iniitize the value on load

<select id="choose">
    <option value="test1" data-value="4.00">Test1</option>
    <option value="test2" data-value="6.00">Test2</option>
    <option value="test3" data-value="7.00">Test3</option>
</select>
<div id="price"></div>

演示：

---

但最好使用data-*属性

jQuery('#choose').change(function (event) {
    jQuery('#price').html(jQuery('#choose option:selected').attr('data'));
}).change(); //to iniitize the value on load

<select id="choose">
    <option value="test1" data-value="4.00">Test1</option>
    <option value="test2" data-value="6.00">Test2</option>
    <option value="test3" data-value="7.00">Test3</option>
</select>
<div id="price"></div>

---

演示：

您可以使用找到选定的选项元素，然后获取数据属性的值

jQuery('#choose').change(function (event) {
    jQuery('#price').html(jQuery('#choose option:selected').attr('data'));
}).change(); //to iniitize the value on load

<select id="choose">
    <option value="test1" data-value="4.00">Test1</option>
    <option value="test2" data-value="6.00">Test2</option>
    <option value="test3" data-value="7.00">Test3</option>
</select>
<div id="price"></div>

演示：

---

但最好使用data-*属性

jQuery('#choose').change(function (event) {
    jQuery('#price').html(jQuery('#choose option:selected').attr('data'));
}).change(); //to iniitize the value on load

<select id="choose">
    <option value="test1" data-value="4.00">Test1</option>
    <option value="test2" data-value="6.00">Test2</option>
    <option value="test3" data-value="7.00">Test3</option>
</select>
<div id="price"></div>

---

演示：

您可以使用找到选定的选项元素，然后获取数据属性的值

jQuery('#choose').change(function (event) {
    jQuery('#price').html(jQuery('#choose option:selected').attr('data'));
}).change(); //to iniitize the value on load

<select id="choose">
    <option value="test1" data-value="4.00">Test1</option>
    <option value="test2" data-value="6.00">Test2</option>
    <option value="test3" data-value="7.00">Test3</option>
</select>
<div id="price"></div>

演示：

---

但最好使用data-*属性

jQuery('#choose').change(function (event) {
    jQuery('#price').html(jQuery('#choose option:selected').attr('data'));
}).change(); //to iniitize the value on load

<select id="choose">
    <option value="test1" data-value="4.00">Test1</option>
    <option value="test2" data-value="6.00">Test2</option>
    <option value="test3" data-value="7.00">Test3</option>
</select>
<div id="price"></div>

演示：

jQuery（'#choose'）.change（函数（事件）{
jQuery（'#price'）.html（jQuery（'#choose option:selected'）.attr（'data'））；
});

jQuery（'#choose'）.change（函数（事件）{
jQuery（'#price'）.html（jQuery（'#choose option:selected'）.attr（'data'））；
});

jQuery（'#choose'）.change（函数（事件）{
jQuery（'#price'）.html（jQuery（'#choose option:selected'）.attr（'data'））；
});

jQuery（'#choose'）.change（函数（事件）{
jQuery（'#price'）.html（jQuery（'#choose option:selected'）.attr（'data'））；
});