Question

我有以下选择框，并希望按display:none inlne属性对其进行排序，所有不具有display:none属性的选项将显示在顶部，其余选项将显示在它们之后。如何在jquery中执行此操作？

代码

<select id="changeme"> 

<option style="display:none;">1</option>
<option>2</option>
<option>3</option>
<option style="display:none;">4</option>
<option>5</option>
<option style="display:none;">6</option> 
<option>7</option> 
<option style="display:none;">8</option>


</select>

我知道具有属性display:none的选项不会显示，但我希望我呈现的html看起来像这样

<select id="changeme"> 


<option>2</option>
<option>3</option>
<option>5</option>  
<option>7</option> 
 <option style="display:none;">4</option>
 <option style="display:none;">6</option>
 <option style="display:none;">1</option>
 <option style="display:none;">8</option>


 </select>

Answer 1

首先使用display:none而不是使用样式class=showLast，这可能很容易

<select id="changeme">
    <option class="showLast">1</option>
    <option>2</option>
    <option>3</option>
    <option class="showLast">4</option>
    <option>5</option>
    <option class="showLast">6</option>
    <option>7</option>
    <option class="showLast">8</option>
</select>

您也可以更改条件this.className === showLast，具体取决于您是否希望首先显示或最后显示类的选项。

var withClass = $('#changeme > option').map(function() {
    if (this.className === 'showLast') {
        return this;
    };
}).toArray();
$('#changeme').append(withClass);

的 DEMO

希望这有帮助

Answer 2

可能不是一个好的解决方案，但它有效

var options = [];
var select = $('#changeme');
select.find('option').each(function(){
    var $this = $(this);
    if($this.css('display') === 'none'){
        options.push($this.wrap('<p />').parent().html());
    }
    else{
        options.unshift($this.wrap('<p />').parent().html());
    } 
})  
select.html(options.join(''));

修改

这是一个更简单的代码（但可能导致隐藏选项为select值）

$('#changeme').find('option').filter(function(){ var $this = $(this); if($this.css('display') == 'none') $this.appendTo($this.parent()); })

按内联css属性排序选择框选项（Jquery）

2 个答案: