Jquery chosen remove attributes by name or id

user_14138883 0
Viewed 80

I'm using Chosen from jQuery to add/hide some form datas based on previous inputs.. I want to ask how I can not hide an entire select only a few elements from in based on id/name. Thank you.

Based on

$("#otherField2").chosen()
$("#seeAnotherField2").chosen()

// This way I can hide all options if nothing is chosen

$("#seeAnotherField2").change(
  function() {
    if ($(this).val() == "nothing") {
      $('#otherFieldDiv2').show();
      $('#otherField2').attr('required', '');
      $('#otherField2').attr('data-error',
        'This field is required.');
    } else {
      $('#otherFieldDiv2').hide();
      $('#otherField2').removeAttr('required');
      $('#otherField2').removeAttr('data-error');
    }
  });
$("#seeAnotherField2").trigger("change");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js" ></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css"  />

<div class="form-group" id="otherFieldDiv3">
  <label for="otherField3">Sev</label>
  <select class="form-control" id="otherField2">
    <option value="nor" id="1">Nor</option>
    <option value="sev" id="2">Sev</option>
    <option value="min" id="3">Min</option>
  </select>
</div>

Hide only option1 from this:

<div class="form-group">
  <label for="seeAnotherField2">Options</label>
  <select class="form-control" id="seeAnotherField2">
    <option value="nothing">Nothing</option>
    <option value="option1">Option1</option>
    <option value="option2">Option2</option>
  </select>
</div>

jquery-chosen html jquery javascript
1 Answers

Try this:

$("#seeAnotherField2").change(function() {
  if ($(this).val() == "nothing") {
    $("#otherField2 option[value='nor']").hide();
    $("#otherField2 option[value='sev']").attr('selected','selected');
  }else{
   $("#otherField2 option[value='nor']").show();
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group" id="otherFieldDiv3">
  <label for="otherField3">Sev</label>
  <select class="form-control" id="otherField2">
    <option value="nor" id="1">Nor</option>
    <option value="sev" id="2">Sev</option>
    <option value="min" id="3">Min</option>
  </select>
</div>

Hide only option1 from this:

<div class="form-group">
  <label for="seeAnotherField2">Options</label>
  <select class="form-control" id="seeAnotherField2">
    <option value="nothing">Nothing</option>
    <option value="option1">Option1</option>
    <option value="option2">Option2</option>
  </select>
</div>

user_120942830
Related