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

Question

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

我试过这个片段：

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

(通过JQuery检查值是否在选择列表中(

但是它公开的选项只是html中定义的占位符选项。如何访问通过向元素推送新html创建的选项？

选择仅定义为

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

为了更新它们，我通过了几个联合的

<option>text</option> 

标记到$("#选择框"(.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>