美文网首页我爱编程
前端,关于下拉选择

前端,关于下拉选择

作者: 夏臻Rock | 来源:发表于2018-06-06 11:51 被阅读0次

    select标签构成的下拉框和jquery通过js构建的下拉框用法一样。例如:

    html下拉框:

    <select id="editState"  class="combobox validatebox" name="dto.baseCode.state" style="width:135px"
        data-options="editable:false,required:true">  
        <option value="1">启用</option> 
        <option value="0" selected>停用</option> 
    </select>
    

    js控制的下拉框:

    <input id="editDisplayName" class="combobox" name="dto.baseCode.displayName" />  
    
    $('#editDisplayName').combobox({  
         url:$WEB_ROOT_PATH+'/basecode/baseCodeCtrl.htm?BLHMI=findBaseCode&dto.baseCode.codeSystem='+diseaseCategory,
         valueField:'id',  
         textField:'text',
         disabled:true,
         onLoadSuccess:function(){
            $CommonUI.getComboBox('#editDisplayName').combobox("setText",row.displayName);
            $CommonUI.getComboBox('#editDisplayName').combobox("setValue",row.displayName);
          }
    });
    

    两者的本质是相同的,但是,select标签创建的下拉框会默认选中第一个选项。而js控制的下拉框默认是不会选中任何选项的。
    当然select标签的默认选项可以通过为option标签添加selected属性设置。
    而js控制的下拉框可以通过$("id").combobox('setValue',value);设置初始值。
    下拉框的默认值的获取方式:
    $("id").next().children(":text").val()或者$("id").combobox("getValue").


    遇到的问题是:下拉框默认选中第一个,但是没有触发选中时候的相应事件。

    解决方法: onchange从这个名称就可以看出,只有在select的选项有改变(change)的时候才会触发这个事件的。一般情况下select的第一个选项是默认选项,当你选中第一个项时,由于值没有改变,所以是不会触发onchange事件的。解决这个问题并没有什么完美的办法,一般你可以增加一个空值的项作为第一选项,比如<option>请选择</option>,这样原来的第一项就变成了第二项,点击该项值就有所改变了,就会触发onchange事件了;或者把除第一项外的其他项设为默认值,这样点击第一项也会触发事件的。

    
    

    相关文章

      网友评论

        本文标题:前端,关于下拉选择

        本文链接:https://www.haomeiwen.com/subject/rwfbsftx.html