如何在Jquery中更改元素时获得所选选项?

snz8szmq  于 2023-04-29  发布在  jQuery
关注(0)|答案(2)|浏览(146)

我有下面的选择,并使用Jquery管理获取新值,以便进一步处理它:

$("select[name=time]").on('change',function(e){
    const target = event.target;
    console.log(target);
    console.log($(target).val());
 });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="time" class="container-full">
       <option value="12:00" data-payvalue=2300>12:30</option>
       <option value="13:00" data-payvalue=2301>13:00</option>
       <option value="14:00" data-payvalue=2101>14:00</option>
    </select>

但我想要的是也检索data-payvalue的他选择的选项以及。你知道我该怎么做吗?
我想做的事情:

$("select[name=time]").on('change',function(e){
        const target = event.target;
        console.log(target);
        console.log($(target).val());
        const payvalue=''; //populate with selected option having data-payvalue
        console.log(payvalue)
     });

我想做的是,一旦我在示例中选择了要显示的值13:00

console.log(payvalue)

我该怎么做?

kdfy810k

kdfy810k1#

你需要像这样调用自定义属性:

const payvalue = $('option:selected').attr("data-payvalue"))
jgovgodb

jgovgodb2#

这样做的一种方法是:

$("select[name=time]").on('change',function(e){
    const target = event.target;
    console.log(target);
    console.log($(target).val());

    //populate with selected option having data-payvalue
    const payvalue=$(target).find(":selected").attr('data-payvalue'); 
    console.log(payvalue)
 });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="time" class="container-full">
       <option value="12:00" data-payvalue=2300>12:30</option>
       <option value="13:00" data-payvalue=2301>13:00</option>
       <option value="14:00" data-payvalue=2101>14:00</option>
    </select>

注意:

//populate with selected option having data-payvalue
        const payvalue=$(target).find(":selected").attr('data-payvalue'); 
        console.log(payvalue)

相关问题