在 select 第一个选项时使用 jquery 然后隐藏其他元素

Question

我试图隐藏其他 html 元素，当我 select 'fresher' 选项时，当前公司、当前 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

如果选择的选项是 "fresher" 那么它将隐藏 #ccmp 元素

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

Answer 2

您需要用 name=experience 为您的 select 写 change event 并基于 selected text hide 或 show closest 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 3

我认为您在脚本级别犯了错误。您输入的不是“$(document).ready”，而是“$(documnet).ready ”。尝试更改它和运行您的代码。

Answer 4

您可以将 change 事件添加到 select 下拉列表中，然后检查其 val。隐藏对元素起作用，如

$(id).hide()

不是.hide(el)，所以你也需要交换它

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

Answer 5

将class="hideClass"添加到您要隐藏的所有元素，然后尝试此代码。

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

在 select 第一个选项时使用 jquery 然后隐藏其他元素

Using jquery when select first option then hide other element

jquery

html

codeigniter-3