时间戳

首页 > 解决方案 > 选择另一个选项时如何更改 DDL 的“已选择”属性并使用 jQuery 删除默认预选值

javascript - 选择另一个选项时如何更改 DDL 的“已选择”属性并使用 jQuery 删除默认预选值

问题描述

最初我需要在特定选项上设置“选定”属性，然后在选择新选项时删除/设置该属性。

1.我最初可以通过执行以下操作将“选定”属性设置为特定选项：

$('select#genres option[value="0"]').attr("selected", "selected");

2.然后当我通过执行以下操作选择一个新选项“更改事件”时：

$('select#genres').on('change', function () {
var newSelected = $('select#genres').find(":selected").attr("selected", "selected");
});

我的问题是如何从旧选项中动态删除“选定”。每次我选择另一个选项时，它们当前都会重复

十分感谢你的帮助。

我的完整代码

HTML

<select id="genres">
       <!-- Preset option that i want -->
       <option value="0">All</option>

       <!-- Dynamically "selected" attribute on change and remove the Preset-->
       foreach (GenreViewModel genre in Model.Genres){
               <option value="@genre.Id" >@genre.Type</option>
       <!-- Output  
       <option value="1" >Action</option>
       and following option result... -->
       }
</select>

jQuery

$(document).ready(function () {

  //Preset option which has "value 0"
  $('select#genres option[value="0"]').attr("selected", "selected");


  $('select#genres').on('change', function () {
    //Add attribute to the new selected option
    var newSelected = $('select#genres').find(":selected").attr("selected", "selected");

   //Hot to remove the old "selected" attribute?
  });

});

标签： javascripthtmljquerydropdown

解决方案

您可以简单地使用[selected]选择器和remoteAttr.

你会想要在你将选中的元素设置在另一个元素上之前这样做，所以在这一行之前。

var newSelected = $('select#genres').find(":selected").attr("selected", "selected");


$('select#genres option[selected]').removeAttr("selected");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="genres">
  <option></option>
  <option selected>SELECED</option>
</select>

推荐阅读