Question

我的表单除其他外还包含几个选择元素。

我想使用一个函数来检索if循环是否需要的那些select元素的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>

产品ID：

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

Answer 1

应该直接在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/

Answer 2

找到解决方法：页面加载后需要运行：

已更改：

document.addEventListener('load', switchPrice, true); function switchPrice() {

with

$(window).bind('load', function() {

adios

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

2 个答案: