Question

我有一些Select元素在一段时间内填充有更新的选项。我想以编程方式访问新选项，以检查选择项是否包含具有特定值的选项。

我尝试了以下代码段：

var exists = false;
$('#select-box option').each(function(){
    if (this.value == 'bar') {
        exists = true;
        return false;
    }
});

（来自Check if value is in select list with JQuery）

但是，这暴露的选项只是html中定义的占位符选项。如何访问通过将新的html推送到元素而创建的选项？

选择仅定义为

<select id=select-box><option>Placeholder</option></select>.

要更新它们，我要传递几个联合的

<option>text</option>

标记到$（“＃select-box”）。html（）。

Answer 1

以下是动态创建option并示例检查是否存在具有特定值的选项的示例：

var index = 1;
$('#add').click(function(event) {
    var val = index++;
    var option = $('<option value="' + val + '">' + val + '</option>');
    $('#select-box').append(option);
})
$('#check').click(function(event) {

    var val = $('#value').val();
    if (val)
        if ($('#select-box option[value="' + val + '"]').length)
            $('#result').text('exist');
        else
            $('#result').text('not exist');
    else
        $('#result').text('please enter a value to check');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id=select-box>
</select>
<br />
<button id="add">Add</button>
<br />
<input id="value" type="number" value="1" />
<button id="check">Check</button>
<br />
<br />
<span id="result">click the Check button to check</span>

Answer 2

一个简单的示例代码：

$('#addOption').click(function() {
  $('#select-box').append('<option>new</option>');
  $('#select-box').append('<option>another new</option>');

  $('#result').append('<p>Dynamic options added</p>');
  $('#result').append('<p>Accessing all options:</p>');

  $('#select-box option').each(function() {
    $('#result').append('<li>' + this.value + '</li>');
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select-box">
  <option>text</option>
</select>

<button id="addOption">
Add options
</button>

<div id="result">

</div>

使用JQuery访问Selects中动态创建的选项

2 个答案: