web-dev-qa-db-ja.com

選択オプションがHTML Webページの「選択」プロパティに更新されない

オプションの「選択された」プロパティを変更する方法を説明してください。例えば。：

<select id="lang_select">
    <option value="en" selected="selected">english</option>
    <option value="ar">العربية</option>
    <option value="az">azərbaycanlı</option>
    <option value="bg">български</option>
    <option value="ca">català</option>
    <option value="cs">český</option>
    <!-- some data cut -->
</select>

したがって、ドロップダウンリストの値を変更しても、html-dataでは何も変更されません。どうして？

JQueryを使用してプロパティを強制的に再ロードしようとした場合にのみ機能します。

$(document).on('change',"select",function(){
    var i = $(this)[0].selectedIndex;
    var ch = $(this).children().each(function(index){
        $(this).prop('selected',index == i);
        if (index == i) {
            $(this).attr('selected','selected');
        } else {
            $(this).removeAttr('selected');
        }
    });
});

どうして？どうすればこれを回避できますか？純粋なhtmlを使用して「選択」を変更することは可能ですか？

[〜＃〜] edit [〜＃〜]つまり、今後このhtmlコードの一部を保存および復元する必要があるため、この属性をhtmlタグに含める必要があります。

javascriptjqueryhtmlhtml-select
17
Vyacheslav

.attr("selected", true)を.prop("selected", true)に置き換えて更新

注、selected属性の値は、_"selected"_ではなく、trueまたはfalseを返します。

セレクター$("option[value=" + this.value + "]", this)を利用して、プロパティselectedをtrue、.siblings()に設定して、selectedからoption属性を削除してください。選択されていない

_$(document).on("change","select",function(){
  $("option[value=" + this.value + "]", this)
  .attr("selected", true).siblings()
  .removeAttr("selected")
});_
_<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="lang_select">
<option value="en"  selected="true">english</option>
<option value="ar">العربية</option>
<option value="az">azərbaycanlı</option>
<option value="bg">български</option>
<option value="ca">català</option>
<option value="cs">český</option>
<!-- some data cut -->

</select>_
17
guest271314

html自体は変更されませんが、selectの値は変更されます

$('select').change(function(){
    $('#result').html($(this).val());
}).trigger('change');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="lang_select">
  <option value="en" selected="selected">english</option>
  <option value="ar">العربية</option>
  <option value="az">azərbaycanlı</option>
  <option value="bg">български</option>
  <option value="ca">català</option>
  <option value="cs">český</option>
  <!-- some data cut -->
</select>
<hr />
<div id="result"></div>
3
Mosh Feu

val()メソッドを使用します。したがって、あなたの場合、$("#lang_select").val('en');は英語オプションを選択します。ちなみに、最初のオプションを選択する場合は、selected="selected"は必要ありません。デフォルトでは、最初のオプションが自動的に選択されます。

1
André Silva