Question

我正在重新设置基于另一个组合框的组合框。我有2个组合框，当我选择01时，second combo已启用，当我从2nd combo选择一个选项时，会出现text box，当我选择时'请从first combo选择'，然后2nd combo自动重置（禁用），但为什么该文本框没有消失？

当从第二个组合中选择除第一个选项以外的选项时，我填充了一个文本框，如：

$(function() {
    //This hides all initial textboxes
    $('label').hide();
    $('#secondcombo').change(function() {
        //This saves some time by caching the jquery value
        var val = $(this).val();
        //this hides any boxes that the previous selection might have left open
        $('label').hide();
        //This just opens the ones we want based off the selection
        switch (val) {
        case 'option1':
        case 'option4':
        case 'other':
            $('#label1').show();
            break;
        }
    });
    //I'm not really sure why these are here
    $("input").focus(function() {
        $(this).next("span").fadeIn(500);
    }).blur(function() {
        $(this).next("span").fadeOut(1000);
    });
});

HTML

  <select id='firstcombo'>
   <option value="">please select</option>
   <option value="01">01</option>
   <option value="02">02</option>
  </select>

  <select id='secondcombo' disabled="true">
   <option value="_">- select -</option>
   <option value="option1">data</option>
   <option value="option2">data</option>
  </select>

  <label id="label1" for="option1">
        <input type="text" id="option1" />
  </label>

Answer 1

这并没有隐藏，因为此代码中没有第一个组合的事件。

您可以使用以下代码隐藏此

<select id='firstcombo' onchange="jQuery('label#label1').hide();">
   <option value="">please select</option>
   <option value="01">01</option>
   <option value="02">02</option>
  </select>

这对你有用。

Answer 2

结帐demo此处

$(function() {
    $('label').hide();
    $('#secondcombo').attr('disabled',true);    

    $('#firstcombo').change(function(){
        if($(this).val()===""){
            $('#secondcombo').attr('disabled',true);
            $('label').hide(); //added this
        }else{
            $('#secondcombo').attr('disabled',false);
        }
    });
    $('#secondcombo').change(function() {
        $('label').hide();
        var val = $(this).val();
        switch (val) {
        case 'option1':
        case 'option4':
        case 'other':
            $('#label1').show(); //u can use fadeIn() here as well
            break;
        }
    });
});

重置组合框时隐藏文本框

2 个答案: