重置組合框時隱藏文本框

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

結帳演示在這里

$(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;
        }
    });
});​