1

我有以下选择框，想按display:noneinlne 属性对其进行排序，所有没有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>
4

2 回答 2

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

​演示

希望这可以帮助

于 2012-06-09T09:37:21.557 回答
0

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

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());
})
于 2012-06-09T09:52:30.497 回答