HTML select下拉框總結
阿新 • • 發佈:2018-12-13
做web專案的時候經常要用到select下拉框,下面是我整理的一些常用知識點
<!-- select元素屬性: multiple="multiple" 多選 disabled="disabled" 禁用 --> <select> <option>中國</option> <!-- option元素屬性: disabled="disabled" 禁用 selected="selected" 選中--> <option id="op" value="America" >美國</option> <option>法國</option> <option>英國</option> </select> <button id="select-btn">測試select</button> <script type="text/javascript"> $("#select-btn").bind('click',function(){ //動態選中option,其值可以為selected,true,false,或者直接設定select元素的值來選中option //$("#op").attr('selected',true); $("select").val('America'); //但是通過js程式碼選中option不會觸發change事件,這時要主動呼叫change事件函式 $("select").trigger("change"); /* 如果上面的值設為true或false,則selected屬性的值為selected,如果設為false,則為undefined, 且通過滑鼠點選選中其他option不影響其值 */ console.log($("#op").attr('selected')); //獲取option的值 console.log($("#op").val()); //獲取option的顯示文字 console.log($("#op").text()); //select框的值就是當前選中的option的值 console.log('select框的值:'+$("select").val()); }); $("select").bind('change',function(){ console.log('change事件:'+$("select").val()); }); </script>