时间戳

首页 > 解决方案 > 无法获取选择元素的值（选择的选项）

javascript - 无法获取选择元素的值（选择的选项）

问题描述

我的表单包含几个选择元素。

使用一个函数，我想检索 if else if 循环所需的 3 个选择元素的值。

我检查了我是否获得了这 3 个选择元素的值，奇怪的是，它只返回第一个选择元素的值。

不知道为什么，在这里需要一些建议，谢谢。马克

js文件中的函数：

document.addEventListener('load', switchPrice, true); function switchPrice() {
    var d1 = $('#producttypeID').val(); // producttypeID
    console.log('producttype ID:', d1);
    var d2 = $('productname').val(); // productnameID
    console.log('product ID:', d2);
    var d3 = $('#dessertservingID').val(); // dessertservingID
    console.log('Servings:', d3);
    etc.
}

控制台日志返回：

producttype ID: 1
priceswitch.js:15 product ID: 
priceswitch.js:17 Servings:

并且没有错误。

HTML：

产品类型 ID：

<select class="form-control" id="producttypeID" data-value="1" disabled="" name="producttypeID" required="">
    <option value="">** Please choose</option>
    <option selected="" value="1">One</option>
    <option value="4">Two</option>
    <option value="2">Three</option>
    <option value="3">Four</option>
</select>

产品编号：

<select class="form-control" id="productname" data-value="1" name="productname" required="">
    <option value="">** Please choose</option>
    <option selected="" value="1">Product 1</option>
    <option value="2">Product 2</option>
    <option value="3">Product 3</option>
    <option value="4">Product 4</option>
    <option value="5">Product 5</option>
    <option value="6">Product 6</option>
    <option value="7">Product 7</option>
    <option value="8">Product 8</option>
    <option value="9">Product 9</option>
    <option value="10">Product 10</option>
    <option value="11">Product 11</option>
    <option value="13">Product 12</option>
    <option value="14">Product 13</option>
    <option value="12">Product 14</option>  
</select>

份量：

<select class="form-control" id="dessertservingID" data-value="11" name="dessertservingID" required="">
        <option value="">** Please choose</option>
        <option value="7">10-12 pers.</option>
        <option value="8">12-14 pers.</option>
        <option value="9">14-16 pers.</option>
        <option value="10">16-18 pers.</option>
        <option value="1">2-3 pers.</option>
        <option selected="" value="11">20-24 pers.</option>
        <option value="2">3-4 pers.</option>
        <option value="3">4-6 pers.</option>
        <option value="4">5-7 pers.</option>
        <option value="5">6-8 pers.</option>
        <option value="6">8-10 pers.</option>
</select>

我已经尝试过的：

    var d2 = $('productname').val();

    var d2 = $('#productname').children('option:selected').val();

    var d2 = $('#productname :selected').val();

    var d2 = document.getElementById('productname').selectedIndex;

    var d2 = document.getElementById('productname').options[document.getElementById('productname').selectedIndex].value;

    var e = document.getElementById('productname');
    var d2 = e.options[e.selectedIndex].value;

    var d2 = $('#productname').val();

    var select_id = document.getElementById('productname');
    var d2 = select_id.options[select_id.selectedIndex].value;

标签： javascriptjquery

解决方案

select 的值应该可以直接在 select 元素上访问，如下所示：

$('#productname')[0].value

如果您想在它发生变化时捕捉它，请尝试这样的事情：

$('#productname').on('change', function(e){
console.log(e.target.value); // should print the value of the selected option
})

这有帮助吗？这是一个工作示例的链接：https ://jsfiddle.net/itamark/pd647cgo/7/

推荐阅读