select 標籤相關用法--持續更新

大家好，這篇文章主要是用來介紹select的相關的用法，持續更新文章。記載我在開發過程中，對select遇到的一些用法，多有遺漏，還有很多缺陷，希望大家能積極評論，探討其他用法。我會積極關注大家的評論，然後更新文章。

OK，Let's go！

本片博客是由select 和Jquery 的combox 兩種下拉框實例，請注意使用。

首先給出一個實例代碼：

<select name="myselect" id="myselect">
  <option value="opt1">選項1</option>
  <option value="opt2">選項2</option>
</select>

1.增加選擇事件:

第一種：添加事件

這個對combox是不適用的
<select name="myselect" id="myselect" οnchange='change();'>
  <option value="opt1">選項1</option>
  <option value="opt2">選項2</option>
</select>

function onchange(){
    ...
}

第二種：JQuery添加

  第二種更適合頁面加載時調用

$("#myselect").change(function(){
  ...
});

點擊查看如何主(子)頁面加載後調用函數？

2.查看select選項，但是不能選擇或不能查看：

$("#myselect option").attr("disabled",""); // 可以下拉選項，但是不能選擇
$("#myselect").attr("disabled",""); // 不能下拉選項
$("#myselect").combobox({disabled: true});      //設置下拉款爲禁用

3.設置select的選項：

$("#myselect").val("opt1");
$("#myselect").val();
$("#myselect").find("option[value='']").prop("selected", true);
$('#myselect option:first').prop('selected', 'selected');
$("#myselect").find("option:selected")[0].selected=false;
$("#myselect").find("option:contains('pxx')").attr("selected",true);//包含pxx

//設置值爲2的option爲選中狀態
$('#myselect').attr('value','2');
//設置最後一個option爲選中
$('#myselect option:last').attr('selected','selected');
$("#myselect").attr('value' , $('#test option:last').val());
$("#myselect").attr('value' , $('#test option').eq($('#test option').length - 1).val());

$("#myselect").combobox('setValue',xlid);  //設置下拉款的默認值  xlid是你下拉款的id屬性

4.取消select選項不能選擇的功能：

$("#myselect").removeAttr("disabled");

5.獲取選中值

// 文本
$("#myselect").find("option:selected").text();
$("select[name=items] option[selected]").text();
$('#myselect').combobox('getText') 

//獲取選中的值
$('#myselect').val();
$('#myselect option:selected').val();
$("#"+id).val($(this).combobox('getValues'));// 多選
$("#"+id).val($(this).combobox('getValue'));
$('#myselect').combobox('getValue');


// 獲取索引
$("#myselect").get(0).selectedIndex;  // 獲取Select選擇的索引值
$("#myselect option:last").attr("index");  // 獲取Select最大的索引值
// 獲取數據 並選擇第一項
var data = $('#id').combobox('getData');
$("#myselect").combobox('select',data[0].value);

//獲取第一個option的值
$('#myselect option:first').val();
//最後一個option的值
$('#myselect option:last').val();
//獲取第二個option的值
$('#myselect option:eq(1)').val();


//獲取第一個Group的標籤
$('#myselect optgroup:eq(0)').attr('label');
//獲取第二group下面第一個option的值
$('#myselect optgroup:eq(1) : option:eq(0)').val();

6.默認選中

<option selected>三</option>

7.默認選中項不在下拉框中顯示

<select name="Environment" id="id_Environment">
    <option style='display:none'>1111</option>
    <option>a</option>
</select>
// 也可以
<option hidden >1111</option>

8.操作select的選項

$("#myselect").append("<option value='Value'>Text</option>");  //爲Select追加一個Option(下拉項)
$("<option value='n+1'>第N+1項</option>").appendTo("#myselect");
$("#myselect").prepend("<option value='0'>請選擇</option>");  //爲Select插入一個Option(第一個位置)
//刪除項選中(這裏刪除第一項)
$('#myselect option:first').remove();
$("#myselect option:last").remove();  //刪除Select中索引值最大Option(最後一個)
$("#myselect option[index='0']").remove();  //刪除Select中索引值爲0的Option(第一個)
$("#myselect option[value='3']").remove();  //刪除Select中Value='3'的Option
$("#myselect option[text='4']").remove();  //刪除Select中Text='4'的Option

//刪除選中項
$('#myselect option:selected').remove();
$('#myselect').combobox('clear');//清空選中項
$('#myselect').combobox('loadData', {});//清空option選項
//指定值被刪除
$('#myselect option').each(function(){
   if( $(this).val() == '5'){
        $(this).remove();
    }
});

9.select變更事件

<select οnchange="func()>
  <option value="0" >選項一</option>
  <option value="1" >選項二</option>
</select>

$(function () {  
     $('#cc_id').combobox({  
          onChange: function (newValue, oldValue) {  
             alert(newValue)  
          }  
      });  
 });

// 是因爲easyui重構了一遍你寫的東西，所以綁定上去無效，要找到他重構的那個select，然後在綁定事件
$('#myselect').next().children(':first').children(':first').click(function(){
    XXXXX //你的邏輯代碼
});

$("#myselect").change(function(){//code...});   //爲Select添加事件，當選擇其中一項時觸發

10.重置事件

$('#myselect').combobox('reload','url的路徑')

11.加載數據

$("#myselect").combobox("loadData", data); //data表示一個[]

12.獲取其他屬性

//獲取select的長度
$('#myselect option').length;

Last.給select下拉框增加複選框結合jquery

$(function(){
	initCombobox(‘ssjs’);
});

function initCombobox(id){
		var value = "";
		// 加載下拉框複選框
		$('#'+id).combobox({
			panelHeight:'100',// 設置爲固定高度，combobox出現豎直滾動條
			multiple:true,
			// formatter方法就是實現了在每個下拉選項前面增加checkbox框的方法
			formatter: function (row) {
				var opts = $(this).combobox('options');
				return '<input type="checkbox" class="combobox-checkbox">' + row[opts.textField]
			},
			onLoadSuccess: function () {  // 下拉框數據加載成功調用
				var opts = $(this).combobox('options');
				var target = this;
				var values = $(target).combobox('getValues');// 獲取選中的值的values
				$.map(values, function (value) {
					var el = opts.finder.getEl(target, value);
					el.find('input.combobox-checkbox')._propAttr('checked', true);
				})
			},
			onSelect: function (row) { // 選中一個選項時調用
				var opts = $(this).combobox('options');
				// 獲取選中的值的values
				$("#"+id).val($(this).combobox('getValues'));

				// 設置選中值所對應的複選框爲選中狀態
				var el = opts.finder.getEl(this, row[opts.valueField]);
				el.find('input.combobox-checkbox')._propAttr('checked', true);
			},
			onUnselect: function (row) {
				// 不選中一個選項時調用
				var opts = $(this).combobox('options');
				// 獲取選中的值的values
				$("#"+id).val($(this).combobox('getValues'));

				var el = opts.finder.getEl(this, row[opts.valueField]);
				el.find('input.combobox-checkbox')._propAttr('checked', false);
			}
		});
	}

          效果圖

 

//初始化試題類型,下拉表自適應
    $('#questionType').combobox({
        editable: false,// 不能直接輸入到列表框
        missingMesage: '請選擇',
        valueField: 'code_text',
        textField: 'code_text',
        multiple:true,// 設置下拉框的值可以多選
        url: baselocation + '/sys/getSysCodeData',
        type: "post",
        queryParams: {
            "codeKind1": "試題類型"
        },
        onShowPanel: function () {
            var v = $(this).combobox('panel')[0].childElementCount;
            // 判斷下拉框高度（如果下拉框的數值小於10個，那麼下拉框高度自動顯示，如果大於10個，下拉框高度最高200）
            if (v <= 10) {
                $(this).combobox('panel')
                    .height("auto");
            } else {
                $(this).combobox('panel')
                    .height(200);
            }
        },
        onLoadSuccess: function (res) {
            // 下拉框默認選擇第一項
            if (res) {
                var val = $(this).combobox('getData');
                $(this).combobox('select', val[0]['code_text']); //這個數據根據自己情況來設定
            }
        }
    });

更新---2019-11-27

最後更一個處理後的，我項目默認會有select默認選項，‘請選擇’，這個在選擇中，會默認選中，如果多選不選的話，需要手動取消，很難看。同時加上了清空方法，也主要是對默認選項的清楚，如果沒有這個煩惱的同學，可以跳過了。

可以和上述的實例進行對照哦。

var agnet_list_NetlnConditionComboId = ['formId','statusId'];

    $(function(){
        comboboxGo();
    });

    function comboboxGo(){
        for(var ind in agnet_list_NetlnConditionComboId){
            initCombobox(agnet_list_NetlnConditionComboId[ind]);
        }
    }

    function clearComboboxGo(){
        for(var ind in agnet_list_NetlnConditionComboId){
            clearFirstOption(agnet_list_NetlnConditionComboId[ind]);
        }
    }

    function clearFirstOption(id){
        $('#'+id).combobox("clear");
        var valueJson = $('#'+id).combobox('getData');
        valueJson[0].selected=false;
        valueJson[0].disabled=true;
        for(var i in valueJson){
            valueJson[i].selected=false;
        }
        $('#'+id).combobox('loadData', valueJson);// 獲取選中的值的values
    }

    function initCombobox(id){
        // 加載下拉框複選框
        $('#'+id).combobox({
            panelHeight:'150',// 設置爲固定高度，combobox出現豎直滾動條
            multiple:true,
            // formatter方法就是實現了在每個下拉選項前面增加checkbox框的方法
            formatter: function (row) {
                var opts = $(this).combobox('options');
                if(row[opts.valueField]==''){
                    return
                }
                return '<input type="checkbox" class="combobox-checkbox">' + row[opts.textField]
            },
            onLoadSuccess: function () {  // 下拉框數據加載成功調用
                var opts = $(this).combobox('options');
                var target = this;
                var values = $(target).combobox('getValues');// 獲取選中的值的values
                $.map(values, function (value) {
                    var el = opts.finder.getEl(target, value);
                    el.find('input.combobox-checkbox')._propAttr('checked', true);
                })
            },
            onSelect: function (row) { // 選中一個選項時調用
                var localdata = $('#'+id).combobox('getData');
                var opts = $(this).combobox('options');
                // 獲取選中的值的values
                $("#"+id).val($(this).combobox('getValues'));
                for (var local in localdata){
                    if(localdata[local].value==''){
                        localdata[0].selected=false;
                        localdata[0].disabled=true;
                        continue;
                    }
                    if(localdata[local].value==row.value){
                        localdata[local].selected=true;
                        break;
                    }
                }
                // 設置選中值所對應的複選框爲選中狀態
                var el = opts.finder.getEl(this, row[opts.valueField]);
                el.find('input.combobox-checkbox')._propAttr('checked', true);
                $('#'+id).combobox("clear");
                $('#'+id).combobox('loadData', localdata);
            },
            onUnselect: function (row) {// row 就是哪一行的對象
                // 不選中一個選項時調用
                var opts = $(this).combobox('options');
                // 獲取選中的值的values
                $("#"+id).val($(this).combobox('getValues'));
                var localdata = $('#'+id).combobox('getData');
                for (var local in localdata){
                    if(localdata[local].value==''){
                        continue;
                    }
                    if(localdata[local].value==row.value){
                        localdata[local].selected=false;
                        break;
                    }
                }
                var el = opts.finder.getEl(this, row[opts.valueField]);
                el.find('input.combobox-checkbox')._propAttr('checked', false);
            }
        });
    }

歡迎評論，我會積極更新文章！

 

 

 

參考文章:

https://blog.csdn.net/chendongpu/article/details/89282283

https://blog.csdn.net/weixin_39735923/article/details/79143779