attr with select2 function

Question

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.

Nguyễn Văn Phong · Accepted Answer · 2020-02-05T10:07:27.080

1

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>

edited Feb 05 '20 at 10:07

answered Feb 05 '20 at 07:34

Nguyễn Văn Phong

13,506
17
39
56

now it show error Uncaught TypeError: $(...).select2 is not a function – Vaishnavi Deshpande Feb 05 '20 at 07:44
you need to include [Jquery library](https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js) like this ` ` – Nguyễn Văn Phong Feb 05 '20 at 07:46
So my code is working fine. You might read this link to know how to add jQuery in HTML https://stackoverflow.com/questions/29796169/how-to-add-jquery-code-into-html-page – Nguyễn Văn Phong Feb 05 '20 at 07:54
Note that you are writing jquery inner HTML so you need include jQuery in `` tag. And you can change to `$('select').val('Select Medicine').trigger('change');` – Nguyễn Văn Phong Feb 05 '20 at 08:00
I found issue I include jquery-2.1.4.min.js also which is use for nav bar and other function of project when I comment this code above code is working but other function like nav bar and other function of jquery is not working so that I should include both file. So with both file how could work this function – Vaishnavi Deshpande Feb 05 '20 at 09:57
BTW, You can fix by moving the inline jquery to the correct place. As a result, You no need to include 2 jquery libs. Check my updated answer. – Nguyễn Văn Phong Feb 05 '20 at 10:05
Thanks it's working now. I've use noconflit() above the coding – Vaishnavi Deshpande Feb 05 '20 at 11:43

score 0 · Answer 2 · answered Feb 05 '20 at 07:31

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>

attr with select2 function

2 Answers2