新人，求wex5怎么写一个隐藏和显示下拉框的jquery

linai486

<div xid="toggle">
          <div component="$UI/system/components/justep/row/row" class="x-row"
            xid="row2" style="padding:0;margin-right:auto;margin-left:auto;width:92%;">
            <div xid="formGroup1" class="form-group" style=";margin-right:auto;margin-left:auto;width:100%;">
              <div component="$UI/system/components/justep/labelEdit/labelEdit"
                class="x-label-edit x-label30" xid="labelSelect2">
                <label class="x-label" xid="label12" style="text-align:right;"><![CDATA[用户的房址*：]]></label>  
                <select component="$UI/system/components/justep/select/select"
                  class="form-control x-edit" xid="sex" style="margin-right:8%;" readonly="true">
                  <option value="" xid="default27"><![CDATA[请确定用户区]]></option>
                </select>
              </div>
            </div>
          </div>
          <div component="$UI/system/components/justep/row/row" class="x-row"
            xid="row1" style="padding:0;margin-right:auto;margin-left:auto;width:92%;">
            <div xid="col13" class="form-group" style="padding:0;width:100%;height:100%;">
              <select component="$UI/system/components/justep/select/select" class="form-control"
                xid="roleid2" bind-options="parentTypeData" bind-optionsValue="name"
                bind-optionsLabel="name" bind-optionsCaption="请选择栋" optionsAutoLoad="true"
                onChange="parentSelectChange" bind-ref="data1.ref('col1')" readonly="true">
                <option value=""><![CDATA[请确定用户栋]]></option>
              </select>
            </div>  
            <div xid="col16" class="form-group" style="padding:0;width:100%;height:100%;">
              <select component="$UI/system/components/justep/select/select" class="form-control"
                xid="roleid3" bind-options="$model.getItems()" bind-optionsValue="name"
                bind-optionsLabel="name" optionsAutoLoad="true" bind-ref="data1.ref('col0')"
                bind-optionsCaption="请选择房门号" readonly="true">
                <option value=""><![CDATA[请确定用户房号]]></option>
              </select>
            </div>
          </div>
        </div>

liangyongfei

直接设置select组件的bind-visible属性，就可以控制它的显示和隐藏!!

linai486

liangyongfei 发表于 2015-11-16 12:04
直接设置select组件的bind-visible属性，就可以控制它的显示和隐藏!!

谢谢，我试试

linai486

liangyongfei 发表于 2015-11-16 12:04
直接设置select组件的bind-visible属性，就可以控制它的显示和隐藏!!

有详细的案例吗，我不知道怎么将.w和js连起来

liangyongfei

linai486 发表于 2015-11-16 13:14
有详细的案例吗，我不知道怎么将.w和js连起来

http://doc.wex5.com/?p=3003

linai486

liangyongfei 发表于 2015-11-16 13:22
http://doc.wex5.com/?p=3003

谢谢，我再试试。

linai486

linai486 发表于 2015-11-16 13:27
谢谢，我再试试。

我怎么才可以在 隐藏的下拉框 的上面的输入框输入结束后，下面隐藏的下拉框直接出现，求解；不要按钮的

yuetao

一般这种方法采用：
1、按逻辑把输入框与选择框绑定Data组件列
2、如果逻辑复杂，可以多做一个Model.prototype方法判断
3、把要控制是否隐藏的控件的bind-visible上绑定以上方法

当然也可以主动控制某控件隐藏，比如你在你的select组件sex的onChage中注册：

        Model.prototype.sexChange = function(event){
                if(event.value==="0"){
                        $(this.getElementByXid('roleid2')).css({"display" : "none"});
                        $(this.getElementByXid('roleid3')).css({"display" : "none"});       
                }
                else
                {
                        $(this.getElementByXid('roleid2')).css({"display" : "block"});               
                        $(this.getElementByXid('roleid3')).css({"display" : "block"});               
                }
        };

linai486

yuetao 发表于 2015-11-16 15:29
一般这种方法采用：
1、按逻辑把输入框与选择框绑定Data组件列
2、如果逻辑复杂，可以多做一个Model.protot ...

谢谢，麻烦了，我来试试，

linai486

<div class="form-vertical" component="$UI/system/components/bootstrap/form/form"
        xid="form1">
        <div xid="div12" class="form-group" style="margin-right:auto;margin-left:auto;width:92%;">
          <label xid="label4" class="sr-only"><![CDATA[用户帐号]]></label>  
          <div xid="div14" class="input-group">
            <div xid="div15" class="input-group-addon">
              <span class="glyphicon glyphicon-user"/>
            </div>  
            <input component="$UI/system/components/justep/input/input" class="form-control"
              xid="tid" placeHolder="请输入帐号" autoFocus="true"/>
          </div>
        </div>  
        <div xid="div13" class="form-group" style="margin-right:auto;margin-left:auto;width:92%;" >
          <label xid="label5" class="sr-only"><![CDATA[身份证号]]></label>  
          <div xid="div16" class="input-group">
            <div xid="div17" class="input-group-addon">
              <span class="glyphicon glyphicon-edit"/>
            </div>  
            <input component="$UI/system/components/justep/input/input" class="form-control"
              xid="pass" placeHolder="请输入身份证号" onChage="passChang"/>
          </div>
        </div>  
        <!-- <div bind-visible="$model.getItems('pass')"> -->
        <div>
          <div component="$UI/system/components/justep/row/row" class="x-row"
            xid="row2" style="padding:0;margin-right:auto;margin-left:auto;width:92%;">
            <div xid="formGroup1" class="form-group" style=";margin-right:auto;margin-left:auto;width:100%;">
              <input component="$UI/system/components/justep/input/input" class="form-control"
                xid="input1" placeHolder="请确认区" autoFocus="true" readonly="true"/>
            </div>  
            <div xid="col13" class="form-group" style="padding:0;width:100%;height:100%;">
              <input component="$UI/system/components/justep/input/input" class="form-control"
                xid="input2" placeHolder="请确认栋" autoFocus="true" readonly="true"/>
            </div>
            <div xid="col16" class="form-group" style="padding:0;width:100%;height:100%;">
              <input component="$UI/system/components/justep/input/input" class="form-control"
                xid="input3" placeHolder="请确认房号" autoFocus="true" readonly="true"/>
            </div>
          </div>  
           
      </div>  






Model.prototype.passChang = function(event){
                if(event.value==="0"){
                                $(this.getElementByXid('input1')).css({"display" : "none"});
                        $(this.getElementByXid('input2')).css({"display" : "none"});
                        $(this.getElementByXid('input3')).css({"display" : "none"});        
                }
                else
                {
                                $(this.getElementByXid('input1')).css({"display" : "block"});
                        $(this.getElementByXid('input2')).css({"display" : "block"});               
                        $(this.getElementByXid('input3')).css({"display" : "block"});               
                }
        };









没隐藏成功