Question

我正在使用多个seletize元素（选择）。用户可以从多个选项中进行选择，在提交之前我想在模态中显示他们选择的文本（及其值）。

通过选择，我似乎能够获得值（通过val（））但我无法获得文本（标签）。

例如，City选项包含：

＆＃13;

<select name="city">
  <option value="1"> Melbourne </option>
  <option value="2"> Sydney </option>
  <option value="3"> Mumbai </option>
</select>

＆＃13;

我的创建代码工作正常，我只想获取值和文本，因此如果用户选择墨尔本，我希望能够获得value = 1和text = Melbourne。

任何指针都会有所帮助。

Answer 1

首先，这不是创建多个选择框。

像这样创建一个多选框。

<select name="city" multiple="multiple" id="city">
    <option value="1"> Melbourne </option>
    <option value="2"> Sydney </option>
    <option value="3"> Mumbai </option>
    </select> 
<button type="button" id="get_values">Show values</button>

JS检索值和文本就像这样

document.getElementById('get_values').onclick = function() {
   var x=document.getElementById('city');
    for (var i = 0; i < x.options.length; i++) {
        if(x.options[i].selected ==true)
        {
            alert(x.options[i].text);
            alert(x.options[i].value);
        }
    }
}

检查此JSfiddle http://jsfiddle.net/n0urwz9e/

Answer 2

试试这个。为select元素创建了获取文本的函数。

function textChanged(){
   alert($("#city").val());
  alert($("#city option:selected").text());
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="city" name="city" onChange="textChanged();">
    <option value="1"> Melbourne </option>
    <option value="2"> Sydney </option>
    <option value="3"> Mumbai </option>
    </select>

选择：从多个选择元素中获取文本和值

2 个答案: