使用 jquery 移动设备从 select 选项中获取 'undefined' 值

Question

我正在尝试从列表中选择的任何选项中获取选定值。但是，它提到为“未定义”

<fieldset data-role="controlgroup">
                    <legend>Select Pizza Flavor </legend>
                    <select name="flavorlist" id="flavorlist" onclick="total()">
                        <option value= "">-Select Flavor-</option>
                        <option value="6">Cheezy Chicken (RM6)</option>
                        <option value="6">Spicy Chicken (RM6)</option>
                        <option value="5">Hawaii (RM5)</option>
                        <option value="6">Peperroni (RM6)</option>
                        <option value="5">Seafood (RM5)</option>
                        <option value="5">Beef (RM5)</option>
                    </select>
                </fieldset>

javascript

function flavorprice()
{
    var flavorprice = 0
    
    var list = document.getElementsByName("flavorlist");

    flavorprice = list.value;
    
    return flavorprice;
}

我试过了

function flavorprice()
{
    var flavorprice = 0
    
    var list = document.getElementsByName("flavorlist");

    flavorprice = list.options[list.selectedIndex].value;
    
    return flavorprice;
}

仍然没有价值。如何解决这个问题？我正在学习 jquery 移动。我还不习惯 $ 因为我对这个主题真的很陌生。

Answer 1

问题是因为 getElementsByName() return 是一个节点列表，而不是一个元素。因此 value 属性未定义。

要解决眼前的问题，您可以 select 元素 id，因为这在 DOM 中应该是唯一的，并且只会 return 一个元素：

function flavorprice() {
  return document.getElementById("flavorlist").value || 0;
}

但是请注意，当您使用 jQuery 移动设备时，您可以使用 jQuery 方法来实现相同的目的：

function flavorprice() {
  return $('#flavorlist').val() || 0;
}

// ES6 version of the above:
let flavorprice = () => $('#flavorlist').val() || 0;

使用 jquery 移动设备从 select 选项中获取 'undefined' 值

Getting 'undefined' value from select options using jquery mobile

jquery

jquery-mobile