使用jQuery获取包括HTML元素在内的选择选项

Question

我有一些选择输入。 例如，

<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等属性的所有options元素，我尝试使用.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 ？

提前致谢。

Answer 1

访问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> 

---

但是，您也可以获取父select（'myArea'）元素的html()

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> 

Answer 2

您可以使用$('#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>