带有 select2 功能的 attr答案

【问题标题】：attr with select2 function带有 select2 功能的 attr
【发布时间】：2020-02-05 07:22:19
【问题描述】：

我使用 select2 进行搜索。我使用了以下代码

<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>

我检查了检查元素属性 selected 是否已添加但未显示选择药物。当我使用没有 select2 选项的用户时，它可以工作。但是对于搜索选项，我应该使用 select2 函数。请为此建议我。

【问题讨论】：

标签： jquery jquery-select2

【解决方案1】：

实际上您的代码运行良好。但是您想触发 select2 的更改选择。所以你可以通过这种方式实现它。

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

更新

您应该像这样将内联 jquery 移动到正确的位置

<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>

【讨论】：

现在它显示错误 Uncaught TypeError: $(...).select2 is not a function
你需要包含Jquery library这样<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
所以我的代码运行良好。您可能会阅读此链接以了解如何在 HTML 中添加 jQuery stackoverflow.com/questions/29796169/…
请注意，您正在编写 jquery 内部 HTML，因此您需要在 <head> 标签中包含 jQuery。并且可以改成$('select').val('Select Medicine').trigger('change');
我发现问题我包括 jquery-2.1.4.min.js 也用于导航栏和项目的其他功能，当我评论上面代码的代码工作但其他功能，如导航栏和jquery 的其他功能不起作用，因此我应该包含这两个文件。所以这两个文件怎么能工作这个功能

【解决方案2】：

您可以使用以下

您可以简单地将值设置为 select2，然后调用触发更改事件以告知 select2 是选项选择已更改，它将更新 UI。

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

【讨论】：