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等属性的选项元素，我尝试使用.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; 
});

＆＃13;

var optionStr = '';
$('#myArea option').each(function() {
    optionStr += this.outerHTML; 
});
console.log(optionStr)

＆＃13;

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

＆＃13;

但是，您也可以获得父{（1）}的父选择（＆＃39; myArea＆＃39;）元素

html()

＆＃13;

var optionStr = $('#myArea').html();

＆＃13;

var optionStr = $('#myArea').html();
console.log(optionStr)

＆＃13;

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>

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

2 个答案: