CODEWITHSUNDEEP
jqueryjquery-select2
Vaishnavi Deshpande
Vaishnavi Deshpande

Reputation: 13

attr with select2 function

I have use select2 for searching. I've use following code 

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<select class="form-control select2" id="by_content">
  <option value="Select Medicine">Select Medicine</option>
  <option value="Abc">Abc</option>
</select>
<button id="click">Search</button>
<script>
  $('.select2').select2();
</script>
<script>
  $("#click").click(function() {
    $('select option[value="Select Medicine"]').attr("selected", true);
  });
</script>

I've check in inspect element attribute selected is added but select medicine is not display. when I user without select2 option it is worked. But for searching option I should use select2 function. Please suggest me for this.

Upvotes: 1

Views: 161

Answers (2)

Nguyễn Văn Phong
Nguyễn Văn Phong

Reputation: 14228

Actually your code works well. But you want to trigger change selected of the select2. So you can achieve it in this way. 

$('select').val('Select Medicine').trigger('change');

Updated

You should move inline jquery to the correct place like this

<body>  
    <div>  
        <p> </p>  
    </div>  
</body>
@Scripts.Render("~/bundles/jquery")
<scripts type="text/javascript">
  $('.select2').select2();
  $("#click").click(function(){
          $('select option[value="Select Medicine"]').attr("selected",true);
          console.log($('select option[value="Select Medicine"]').attr("selected"));

          // Trigger selected value here
          $('select').val('Select Medicine').trigger('change');
      });
</scripts>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> 

<select class="form-control select2" id="by_content">  
   <option value="Select Medicine">Select Medicine</option> 
   <option value="Abc">Abc</option> 
   <option value="Def">Def</option>
</select> 
<button id="click">Search</button>
<script> $('.select2').select2(); </script>
<script>
  $("#click").click(function(){
      $('select option[value="Select Medicine"]').attr("selected",true);
      console.log($('select option[value="Select Medicine"]').attr("selected"));
      
      // Trigger selected value here
      $('select').val('Select Medicine').trigger('change');
  });
</script>

Upvotes: 1

Yogesh Patel
Yogesh Patel

Reputation: 722

You can use following

You can simply set the value to select2 and after that call trigger change event to letting know the select2 is option selection is changed and it will update the UI.

<script>
  $("#click").click(function() {
    $('select').val("Select Medicine").trigger('change');
  });
</script>

Upvotes: 0

Related Questions