Question

我们如何通过它在jQuery中的值来获取jquery中的选项HTML。

HTML

<select multiple="" style="width: 147px;" id="list" name="list" class="list_class">
  <option value="21">A</option>
  <option value="22">B</option>
  <option value="23">C</option>
  <option value="24">D</option>
  <option value="2">E</option>
</select>

阵列

var id_arry = ['21','24','2'];

我有这个数组有一些与下拉列表中的值相关的值。现在我想获得与下拉列表中的值匹配的所有选项喜欢

<option value="21">A</option><option value="24">D</option> <option value="2">E</option>

这是我从下拉列表中想要的最终输出。请在此帮助我

我想在此下拉列表中添加这些选项html：

<select multiple="" style="width: 147px;" id="list" name="list1" class="list_class">

</select>

Answer 1

也许是这样的：

var id_arry = ['21','24','2'];

var optionMatches = $('#list option').filter(function() {
    return $.inArray($(this).val(), id_arry);
});

打破它：

$('#list option') - 使用ID＆＃34; list＆＃34;

所有

.filter(callback) - 一个简单的过滤函数 - 回调决定该选项是否使其进入最终列表
$.inArray($(this).val(), id_arry) - 检查当前选项值是否在数组id_arry

在研究了您的示例之后，您似乎首先要从多选下拉列表中获取选定的选项，以构建您的id_arry，这是很容易：

var id_arry = $('#list').val();

获得这些以及optionMatches元素数组后，您可以将它们克隆到新的下拉列表中：

optionMatches.clone().appendTo('#otherSelect');

Answer 2

一种解决方案是使用join和split：

var id_arry = ['21', '24', '2'];
$("#list").val(id_arry.join(',').split(','));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple="" style="width: 147px;" id="list" name="list" class="list_class">
  <option value="21">A</option>
  <option value="22">B</option>
  <option value="23">C</option>
  <option value="24">D</option>
  <option value="2">E</option>
</select>

Answer 3

您可以使用jQuery＆＃39; attribute equals selector来定位具有特定属性值的元素：

$( "option[value='21']" )

使用此选择器和简单循环，您可以提取所需的所有元素：

var elements = [];
var id_array = ['21','24','2'];
for ( index in id_array ){
  var elem = $( "option[value='" + id_array[ index ] + "']" );
  if ( elem ) {
    elements.push( elem );
  }
}

您的elements数组现在包含id_array中显示的所有选项元素。

Answer 4

var id_arr = ['21','24','2'];
var entireHTML = "";
var options = $('select').find('option');
var tempDiv = $('div');

//id_arr = $('select').val(); //Uncomment this line to get value from the select element.

$.each(id_arr, function(index, value){

   entireHTML = "";

    $(options).each(function(){
        if( $(this).val() === value)
        {
            $(this).clone().appendTo(tempDiv);
        }
    });
});
entireHTML = $(tempDiv).html();

由于您需要'option'元素的HTML内容，因此它们被克隆并包装在临时div中，以便复制该临时div的内部HTML并将其附加到我们的最终HTML字符串中。

亲自检查一下：JSFiddle Test Link

通过它在Jquery中的值获取选项HTML

4 个答案: