javascript - 使用 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>

现在我想迭代选择并获取具有 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 选择器？

提前致谢。

Answer 1

访问outerHTML属性(property)

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>