Question

我试图只从多选中获取可见元素。

Jquery的：

var button = $("button")
button.on("click", function(){
  var selectedOpts = $('#test option').prop( "disabled", false );
  console.log(selectedOpts);
})

$（'＃test option'）会返回所有元素

预期输出：它应该只返回可见元素

HTML：

<button>select</button>
<select multiple="multiple" id="test" class="form-control">
    <option value="15" style="display: none;">one</option>
    <option value="32" style="display: none;">two</option>
    <option value="68" style="display: none;">three</option>
    <option value="1" style="">four</option>                                                                                          
</select>

演示代码： https://jsfiddle.net/xpvt214o/109483/

Answer 1

在:visible选择器旁边使用option属性选择器，只获取可见选项：

var selectedOpts = $('#test option:visible')
console.log(selectedOpts);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>select</button>
<select multiple="multiple" id="test" class="form-control">
    <option value="15" style="display: none;">one</option>
    <option value="32" style="display: none;">two</option>
    <option value="68" style="display: none;">three</option>
    <option value="1" style="">four</option>                                                                                          
</select>

这是工作JSFIDDLE

Answer 2

您正在寻找：

var button = $("button")
button.on("click", function(){
  var selectedOpts = $('#test option:visible');
  console.log(selectedOpts);
})

“禁用”是完全不同的事情。

在代码中使用这两个选项来实际查看差异：

  <option value="15" disabled>I'm disabled</option> 
  <option value="16" style="display: none;">I'm not visible</option>

Answer 3

这将显示每个可见内容。

＆＃13;

var selectedOpts = $('#test option:visible');
 selectedOpts.each(function(){    
    console.log($(this).html());
 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>select</button>
<select multiple="multiple" id="test" class="form-control">
    <option value="15" style="display: none;">one</option>
    <option value="32" style="display: none;">two</option>
    <option value="68" >three</option>
    <option value="1" style="">four</option>                                                                                          
</select>

＆＃13;

从multiselect中仅选择可见选项

3 个答案: