1. 程式人生 > 實用技巧 >jQuery中select下拉框操作

jQuery中select下拉框操作

1.從後臺獲取資料並通過迴圈方式給select新增option

 載入完資料重新整理下拉選單

 $('#queryDepart').selectpicker('refresh')

2.jQuery操作select下拉框  

  var selId = 下拉框物件ID

  1. 獲取指定下拉框選項:
  $("#selId").find("option:selected");

“option:selected”為選中項,“option:first”為首項(索引值為0),“option:last”為末項(索引值最大)

 $("#selId option[value='xxx']")

獲取下拉框選項值為“xxx”的選項

  //$("#selId option[text='xxx']");
  //$("#selId option[index='x']");

以上2種方法測試後,均返回Object,但.val()方法返回undefined,.text()方法返回為空,.attr("selected", true)方法更無效果,建議不要使用!!

  2. 獲取下拉框選中項的文字:
  $("#selId").find("option:selected").text();

  3. 獲取下拉框選中項的值:
  $("#selId").val();

  4. 獲取下拉框選中項的索引:
  $("#selId").get(0).selectedIndex;

“get(0)”即獲取選中項

  例如:

<select id="selId">
    <option value="a">AAA</option>
    <option value="b">BBB</option>
    <option value="c">CCC</option>
    <option value="e" selected="selected">EEE</option>
</select>

  用此方法獲取以上下拉框選中項的索引值為3。

  5. 設定下拉框的選中項:
  $("#selId").get(0).selectedIndex = index;

設定下拉框中選項的索引值=index的項為選中項

  $("#selId").attr("value","xxx“);
  $("#selId").val("xxx");
  $("#selId").get(0).value = "xxx";

以上3個方法都是設定下拉框中選項的值=“xxx”的項為選中項

  6. 新增下拉框選項:
  $("#selId").append("<option value='Value'>Text</option>");

  $("#selId").prepend("<option value='Value'>Text</option>");

“append”在下拉框末尾新增,新增後此項索引值最大; “prepend”在下拉框的首部新增,新增後此項索引值為0

  7. 移除下拉框選項:
  $("#selId option[value='xxx']").remove();

移除下拉框選項值為“xxx”的選項

  8. 清空下拉框所有選項:
  $("#selId").empty();
  $("#selId option").remove()