JQuery 對 Select option 的操作

安靜點發表於2018-01-12
jQuery

Select 筆記

$(document).ready(function() {
  //繫結下拉框change事件，當下來框改變時呼叫 SelectChange()方法
  $("#select").change(function() {
    SelectChange();
  });
})

function SelectChange() {
  //獲取下拉框選中項的text屬性值
  var selectText = $("#select").find("option:selected").text();

  //獲取下拉框選中項的value屬性值
  var selectValue = $("#select").val();

  //獲取下拉框選中項的index屬性值
  var selectIndex = $("#select").get(0).selectedIndex;

  ////獲取下拉框最大的index屬性值
  var selectMaxIndex = $("#select option:last").attr("index");
}

function selectByIndex(index) {
  //根據index 選中
  $("#select").get(0).selectedIndex = index;
}

function selectByValue(value) {
  //根據value 選中
  $("#select").val(value);
}

function selectByText(text) {
  //根據text 選址
  $("#select option[text='"+text+"']").attr("selected", "selected");

  $("#select option:contains('"+text+"')").attr("selected", true);
}

function selectAppend() {
  //在下拉框最後新增一個選項
  $("#select").append("<option value='add'>add</option>");
}

function selectPrepend() {
  //在下拉框最前新增一個選項
  $("#select").prepend("<option value='0'>0</option>")
}

function selectRemove() {
  //移除下拉框最後一個選項
  $("#select option:last").remove();
}

function selectRemoveByIndex(index) {
  //根據index 移除
  $("#select option[index='"+index+"']").remove();
}

function selectRemoveByValue(value) {
  //根據value 移除
  $("#select option[value='"+value+"']").remove();
}

function selectRemoveByText(text) {
  //根據text移除
  $("#select option[text='"+text+"']").remove();
}
複製程式碼

相關文章