4

属性の更新を含む文字列として HTML コードを取得しようとしています。

JavaScript を使用してオプションを更新するselectタグがあります。

デフォルトでは、最初optionはselectedHTML 属性を使用していますselected="selected"。

selectedを使用して最初のオプションから設定を解除し、2 番目のオプションをoption1.selected = false設定してから、 a のを呼び出すと、次のようになります。option2.selected = trueoptionouterHTMLselect

<select>
    <option selected="selected">one</option>
    <option>two</option>
    <option>three</option>
  </select>

ご覧のとおり、selectedアトリビュートはまだ最初のoptionにありますが、2 番目の に移動されていoptionます。期待される結果は

<select>
    <option>one</option>
    <option selected="selected">two</option>
    <option>three</option>
  </select>

これはhttp://jsbin.com/adAbAMe/2/edit?html,js,console,output (クリックrun with jsして結果を取得)の例で、selected属性が変更された場合、HTML では変更されないことを示しています。コード。

しかし、outerHTML から属性の更新が成功した最終的な HTML を取得する必要があります。これselectをどこかに移動すると、JavaScript を使用する前に行った更新が取得されないからです。

実際の属性値を持つ文字列として HTML を取得する方法はありますか?

4

4 に答える 4

3

selected属性は自動的に更新されませんが、削除して適切な要素に追加するように設定できます。

//remove "selected" from first
if (i==0) {
  option.selected = false;
  option.removeAttribute("selected");
}

//add "selected" to second
if (i==1) {
  option.selected = true;
  option.setAttribute("selected", "selected");
}

これが実用的なフィドルです。

于 2014-01-11T14:54:45.920 に答える
0

DOM仕様から：

ブール型の選択

対話型ユーザー エージェントで、対応するフォーム コントロールの現在の状態を表します。この属性を変更すると、フォーム コントロールの状態が変更されますが、要素の HTML selected 属性の値は変更されません。

(私のものを強調)

探している効果を得るには、必要ですが、他のオプションについてoption.setAttribute('selected', 'selected')も必要です。option.removeAtrribute('selected')

于 2016-03-02T15:56:26.513 に答える
0

試す

$('button').click(function () {
    console.log($('select').prop('outerHTML'))
})

$('select').change(function(){
    $(this).find('option[selected]').removeAttr('selected');
    $(this).find('option:selected').attr('selected', 'selected');
})

デモ:フィドル

于 2014-01-11T14:55:59.230 に答える
0

使用できます

option.setAttribute('selected', 'selected');

と

option.removeAttribute('selected');
于 2014-01-11T14:54:24.763 に答える