jQuery:OnClick更改选项“selected”属性

jQuery:OnClick更改选项“selected”属性,jquery,html,Jquery,Html,这将是我在这里的第二篇文章,如果有人能用他的魔法知识来支持,那将是非常棒的: 我想要实现什么 更改要从默认值中删除属性“selected”的选项,并添加到我单击的选项 这是我想要的HTML: <select class="flex-calc-length"> <option value="6">1/2 year</option> <option value="12" selected>1 year</option> &

这将是我在这里的第二篇文章,如果有人能用他的魔法知识来支持,那将是非常棒的:

我想要实现什么

更改要从默认值中删除属性“selected”的选项,并添加到我单击的选项

这是我想要的HTML:

<select class="flex-calc-length">
   <option value="6">1/2 year</option>
   <option value="12" selected>1 year</option>
   <option value="24">2 years</option>
   <option value="36">3 years</option>
   <option value="48">4 years</option>
   <option value="60">5 years</option>
</select>
但总的来说,这是materialize.css Select功能的一部分,它添加了一系列代码,从上面转换为:

<div class="select-wrapper flex-calc-length">
<span class="caret">▼</span>
<input type="text" class="select-dropdown" readonly="true" data-activates="select-options-3062497b-bc40-0e77-91c3-550f09e8e872" value="1 year">
<ul id="select-options-3062497b-bc40-0e77-91c3-550f09e8e872" class="dropdown-content select-dropdown" style="width: 215.2px; position: absolute; top: 0px; left: 0px; display: none; opacity: 1;">
    <li class=""><span>1/2 year</span></li>
    <li class=""><span>1 year</span></li>
    <li class="active selected"><span>2 years</span></li>
    <li class=""><span>3 years</span></li>
    <li class=""><span>4 years</span></li>
    <li class=""><span>5 years</span></li>
</ul>
<select class="flex-calc-length initialized" data-select-id="3062497b-bc40-0e77-91c3-550f09e8e872">
    <option value="6">1/2 year</option>
    <option value="12" selected="">1 year</option>
    <option value="24">2 years</option>
    <option value="36">3 years</option>
    <option value="48">4 years</option>
    <option value="60">5 years</option>
</select>
</div>

这是你想要实现的吗

让prevVal=$'.flex calc length'.val; 函数替换选择{ selectedVal=$'.flex calc length'.val; $'.flex calc length>option'.eachfunctioni,项目{ ifitem.value==prevVal{ $item.removeAttrselected; } } $'.flex calc length>option'.eachfunctioni,项目{ ifitem.value==selectedVal{ $item.attrselected,true; prevVal=$item.val; } } } 选项[已选]{ 背景颜色:黄色; } 1/2年 一年 两年 三年 4年 五年
默认情况下不会发生这种情况吗?浏览器将自动更改所选属性,您无需付出任何努力。这是select的默认HTML行为。忘记添加了,我正在将此功能与materialize.css一起使用,后者正在向该属性添加许多行代码。不知何故,默认情况下它不会更改。如何检查源代码?查看源代码,还是使用开发工具?非常感谢您的回答,这帮助我进一步了解整个想法。