如何使 <select> 的第一个选项不使用 jquery 向上移动？ [关闭]

Posted 2023-05-08

【中文标题】如何使 <select> 的第一个选项不使用 jquery 向上移动？ [关闭]

【英文标题】：How to make the first option of <select> not move up down with jquery? [closed]

【发布时间】：2022-01-19 15:02:40

【问题描述】：

我有一个选择列表，我想让第一个选项（值）不可选择，并且在单击这样的按钮时无法上下移动：

值应始终在顶部

When Author is selected and pressing the up button no changes should be made. value 选项必须仍然在顶部。

<select name="Select" title="Dropdown List" size="26" multiple="true" style="width:300" class="defaultDropdownListStyle">
  <option title="Value" value="Value" selected="true" disabled=""> Value </option>
  <option title="Author" value="Author"> Author </option>
  <option title="Title" value="Title"> Title </option>
</select>

如何使用 jquery 来实现？谢谢

编辑： 按钮功能

function btnUp()
    
       var index = columns.elements[listbox].selectedIndex;
       var optsSelected = columns.elements[listbox].options;
       var hidden = columns.elements[hidden];
       if (index > 0)
       
          itemsMove(index, index - 1, optsSelected);
          updateHid(hidden, optsSelected);
       


   function btnDown()
        
           var index = columns.elements[glistbox].selectedIndex;
           var selectedOptions = columns.elements[listbox].options;
           var selectedHidden = columns.elements[hidden];
           if (index >= 0 && index < optsSelected.length - 1)
           
              itemsMove(index, index + 1, optsSelected);
              updateHid(hidden, optsSelected);
           
    


function itemsMove(fromIndex, toIndex, options)

   if (fromIndex != toIndex)
   
         var option = options[fromIndex];
         options.remove(fromIndex);
         options.add(option, toIndex);
      
      else
      
         var nLength = options.length;
         var arrOptions = new Array(nLength);
         for (var i=0; i < nLength; i++)
         
            arrOptions[i] = options[0];
            options[0] = null;
         
         var option = arrOptions[fromIndex];
         if (toIndex < fromIndex)
         
            for (var i = fromIndex; i > toIndex; i--)
            
               arrOptions[i] = arrOptions[i-1];
            
         
         else
         
            for (var i = fromIndex; i < toIndex; i++)
            
               arrOptions[i] = arrOptions[i+1];
            
         
         arrOptions[toIndex] = option;
         for (var i=0; i < nLength; i++)
         
            options[i] = arrOptions[i];
         
      
   

【问题讨论】：

我们需要查看单击向上和向下按钮时运行的代码以调试问题。

这完全取决于这些按钮是如何实现的；它们不是标准select 的一部分。这可能是一个简单的例子，检查 index==0（顶部条目）更改为 index==1（第二个条目）。

in btnUp: if (index > 0) -> if (index > 1) 和同样的btnDown -> if (index >= 1

【参考方案1】：

没有看到你正在使用的代码，真的很难判断你需要做什么。

不过，为了重写此部分，您需要获取选择字段中的选项，然后以某种方式重写它们。

因此，您可以尝试的一件事是拆分选项并排除第一个索引，以便您只触及非空选项。然后替换他们的订单。

这是我所说的非常粗暴的版本。如果这不是您想要的，请告诉我，如果您可以包含 minimal reproducible example，那就太好了！

$(document).ready(function() 
  let nullOption;
  let options = [];
  $('#forecastSelect option').each(function( index ) 
    if (index > 0) 
      options.push(this)
      this.remove();
     else 
      nullOption = this
    
  );
  
  options = options.reverse();
  
  options.forEach((option) => 
    $('#forecastSelect').append(option);
  );
  
  console.log(nullOption);
  console.log(options);
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="forecastSelect" name="forecastSelect" title="Dropdown List" size="26" multiple="true" style="width:300" class="defaultDropdownListStyle">
  <option title="Value" value="Value" selected="true" disabled=""> Value </option>
  <option title="Author" value="Author"> Author </option>
  <option title="Title" value="Title"> Title </option>
</select>