最初のオプションを選択してから他の要素を非表示にするときにjqueryを使用する

Question

他のhtml要素を非表示にしようとしているときに、「もっと新鮮な」オプションを選択すると現在の会社、現在のctcおよび通知要素が非表示になります。私はこれにどのようにわからない。私を助けてください。

コード以下を参照してください。

<div class="form-group"> 
    <div class="col-xs-6"> 
    Experience: 
    <select name="experience" class="form-control" id="exp" value="<?php echo $experience; ?>" required> 
    <option></option> 
    <option>fresher</option> 
     <option>0-1 years</option> 
     <option>1-3 years</option> 
     <option>4-5 years</option> 
     <option>5+ years</option> 
    </select> 
    <div class="error"><?php echo form_error("experience");?></div> 
    </div> 
</div> 

<div class="form-group"> 
    <div class="col-xs-6"> 
    current_company Name: 
    <input type="text" name="ccn" class="form-control" id="ccmp" value="<?php echo set_value('ccn'); ?>" placeholder="current company name" required> 
    <div class="error"><?php echo form_error("ccn");?></div> 
    </div> 
</div> 

<div class="form-group"> 
    <div class="col-xs-6"> 
    Notice period: 
    <select name="notice" class="form-control" id="notice" value="<?php echo $notice_period; ?>" placeholder="notice period in months" required> 
    <option></option> 
     <option>10-30 days</option> 
     <option>1 month</option> 
     <option>2 months</option> 
     <option>3 months</option> 
    </select> 
    <div class="error"><?php echo form_error("notice");?></div> 
    <br> 
    current CTC: 
    <input type="text" name="ctc" class="form-control" id="ctc" value="<?php echo set_value('ctc'); ?>" placeholder="currenty ctc" required> 
    <div class="error"><?php echo form_error("ctc");?></div> 
    </div> 
</div> 

と私がしようとしています。このjqueryの

$(documnet).ready(function{ 
    $("#exp:selected").val('fresher').hide($("#ccmp")); 
}); 

Answer 1

を非表示になりますselectにchange eventと書いてとする必要がありますとccmpとnotice要素

$(document).ready(function() { 
 
    $('select[name="experience"]').on('change', function() { 
 
    if($(this).find("option:selected").text()=="fresher") //check if option selected is fresher 
 
     $('#ccmp, select[name="notice"]').closest('.form-group').hide();//hide the parents 
 
    else 
 
     $('#ccmp, select[name="notice"]').closest('.form-group').show();//show the parents 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <div class="col-xs-6"> 
 
    Experience: 
 
    <select name="experience" class="form-control" id="exp" value="<?php echo $experience; ?>" required> 
 
     <option></option> 
 
     <option>fresher</option> 
 
     <option>0-1 years</option> 
 
     <option>1-3 years</option> 
 
     <option>4-5 years</option> 
 
     <option>5+ years</option> 
 
    </select> 
 
    <div class="error"> 
 
     <?php echo form_error("experience");?> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="form-group"> 
 
    <div class="col-xs-6"> 
 
    current_company Name: 
 
    <input type="text" name="ccn" class="form-control" id="ccmp" value="<?php echo set_value('ccn'); ?>" placeholder="current company name" required> 
 
    <div class="error"> 
 
     <?php echo form_error("ccn");?> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="form-group"> 
 
    <div class="col-xs-6"> 
 
    Notice period: 
 
    <select name="notice" class="form-control" id="notice" value="<?php echo $notice_period; ?>" placeholder="notice period in months" required> 
 
     <option></option> 
 
     <option>10-30 days</option> 
 
     <option>1 month</option> 
 
     <option>2 months</option> 
 
     <option>3 months</option> 
 
    </select> 
 
    <div class="error"> 
 
     <?php echo form_error("notice");?> 
 
    </div> 
 
    <br>current CTC: 
 
    <input type="text" name="ctc" class="form-control" id="ctc" value="<?php echo set_value('ctc'); ?>" placeholder="currenty ctc" required> 
 
    <div class="error"> 
 
     <?php echo form_error("ctc");?> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

選択されたオプションがある場合は、 "新鮮" それは#ccmp要素

$(document).ready(function() { 
    $("#exp").on('change', function() { 
     if ($("#exp option:selected").text() === "fresher") { 
      $("#ccmp").hide(); 
     } 
    }); 
}); 

Answer 3

のselected texthideまたはshowに基づいてclosest親は私はあなたのスクリプトのレベルでエラーが発生したと思います。 "$（document）.ready"の代わりに "$（documnet）.ready"と入力してください。それを変更してコードを実行してみてください。

Answer 4

選択したプルダウンにchangeイベントを追加して、valを確認できます。あなたの周りにも

$(function() { 
    $("#exp").change(function() { 
     if ($("#exp").val() == "fresher") { 
      $("#cmp").hide(); 
     } 
    }) 
}); 

Answer 5

非表示にしたいすべての要素にクラス=「hideClass」を追加し、試すことをスワップする必要があるので、隠すには、

$(id).hide() 

ない.hide(el)のような要素に取り組んでいますこのコード。

$(document).on('change','#exp',function(e){ 
     var text = $('#exp').find(":selected").text(); 
     if(text=='fresher'){ 
      $('.hideClass').hide(); 
     } 
    });