Question

如何在选择选项时隐藏输入？

我有这段代码：

<select>
   <option name="1st" id="1st"></option>
   <option name="2nd" id="2nd"></option>
</select>

<input type="text" name="textinput" id="textinput">

选择＃2nd时如何隐藏#textinput？我想通过验证（jQuery验证器），并且在选择＃2nd时无法完成。

演示：这是简报的代码：

http://jquery.bassistance.de/validate/demo/

https://github.com/jzaefferer/jquery-validation/blob/master/demo/themerollered.html

更新

我有这段代码：

HTML

<form id="form">
    <select>
        <option value="1st" name="1st" id="1st">1st</option>
        <option value="2nd" name="2nd" id="2nd">2nd</option>
    </select><br/>
    <input type="text" name="textinput" id="textinput"/><br/>
    <input type="text" name="textinput2" id="textinput2"/><br/>
</form>

的js

jQuery(document).ready(function () {
    jQuery("#form").validate({
    rules: {
        'textinput':{required: true, minlength: 5},
        'textinput2':{required: true, minlength:15}
           },
    messages: {
        textinput:{
            required:"Add...",
            minlength: jQuery.validator.format("Add min {0} char"),
                },
        descriere_anunt:{
            required:"Add...",
            minlength: jQuery.validator.format("Add min {0} char")
                }
              }
 });
 });

http://jsfiddle.net/PjD36/1/

我只想隐藏“textinput”

Answer 1

试试这个：

<select>
<option name="1st" id="1st" value="1st"></option>
<option name="2nd" id="2nd" value="2nd"></option>
</select>

<input type="text" name="textinput" id="textinput">



$('select').change(function(){
 ($(this).val() == '2nd' ? $('input').fadeOut():$('input').fadeIn())
});

Answer 2

更完整的解决方案是：

$('select').on('change', function(){
   if($(this).val() == '2nd') { // if select's value if 2nd
      $('input').hide(); // hide input
   }
});

将HTML更改为：

<option value="1st" name="1st" id="1st"></option>
<option value="2nd" name="2nd" id="2nd"></option>

编辑：

更新了fiddle。

Answer 3

if($('select').val() == '2nd') { // if select's value if 2nd
   $('input').hide(); // hide input
}

只需将HTML更新为：

<option value="1st" name="1st" id="1st"></option>
<option value="2nd" name="2nd" id="2nd"></option>

或者如果您想保留完全相同的HTML，那么您可以尝试捕获2nd选项上的click事件并执行此操作：

$('#2nd').click(function () {
   $('input').hide();
}

请注意，如果用户通过键盘上的箭头键选择值，则无法使用此功能。否则它会起作用，因为他会点击元素来选择它。

在jquery中隐藏输入

3 个答案:

编辑：