使用jQuery获取包括HTML元素在内的选择选项
使用jQuery获取包括HTML元素在内的选择选项
提问于 2017-01-02 12:06:20
我有一个选择输入和一些选项。例如,
<select id="myArea">
<option class="myClass_1" style="color:red;" value="1">Area 1</option>
<option class="myClass_2" style="color:green;" value="2">Area 2</option>
<option class="myClass_1" style="color:red;" value="3">Area 3</option>
<option class="myClass_1" style="color:red;" value="4">Area 4</option>
</select>现在，我想迭代select并获得所有具有属性(如class,style )的选项元素，我尝试使用.html()来获得这些选项元素。但不起作用。
var optionStr = '';
$('#myArea option').each(function() {
optionStr += $(this).html(); // like <option class="myClass_1" style="color:red;" value="1">Area 1</option>, etc.,
});预期产出：
optionStr = '<option class="myClass_1" style="color:red;" value="1">Area 1</option><option class="myClass_2" style="color:green;" value="2">Area 2</option><option class="myClass_1" style="color:red;" value="3">Area 3</option><option class="myClass_1" style="color:red;" value="4">Area 4</option>';我该怎么拿到这个？我必须使用哪一种jQuery-selectors？
提前谢谢。
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-01-02 12:08:38
访问outerHTML属性
var optionStr = '';
$('#myArea option').each(function() {
optionStr += this.outerHTML;
});
var optionStr = '';
$('#myArea option').each(function() {
optionStr += this.outerHTML;
});
console.log(optionStr)<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="myArea">
<option class="myClass_1" style="color:red;" value="1">Area 1</option>
<option class="myClass_2" style="color:green;" value="2">Area 2</option>
<option class="myClass_1" style="color:red;" value="3">Area 3</option>
<option class="myClass_1" style="color:red;" value="4">Area 4</option>
</select>
但是，您也可以获得父选择(‘myArea’)元素的myArea
var optionStr = $('#myArea').html();
var optionStr = $('#myArea').html();
console.log(optionStr)<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="myArea">
<option class="myClass_1" style="color:red;" value="1">Area 1</option>
<option class="myClass_2" style="color:green;" value="2">Area 2</option>
<option class="myClass_1" style="color:red;" value="3">Area 3</option>
<option class="myClass_1" style="color:red;" value="4">Area 4</option>
</select>
Stack Overflow用户
发布于 2017-01-02 12:12:18
您可以使用$('#myArea').html()获取所有选项：
console.log($('#myArea').html());<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="myArea">
<option class="myClass_1" style="color:red;" value="1">Area 1</option>
<option class="myClass_2" style="color:green;" value="2">Area 2</option>
<option class="myClass_1" style="color:red;" value="3">Area 3</option>
<option class="myClass_1" style="color:red;" value="4">Area 4</option>
</select>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41426535
复制相关文章
相似问题
腾讯云开发者
