externalHTML 및 속성 업데이트

Question

속성이 업데이트된 문자열로 HTML 코드를 가져오려고 합니다.

나는 select 태그, JavaScript를 사용하여 옵션을 업데이트합니다.

기본적으로 첫 번째 option ~이다 selected HTML 속성을 사용하여 selected="selected".

설정을 해제하면 selected 첫 번째 옵션에서 다음을 사용하여 option1.selected = false 그리고 설정 option2.selected = true 두 번째로 option, 을 누른 다음 outerHTML ~의 select, 나는 얻다

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

보시다시피, selected 속성이 여전히 첫 번째에 있습니다. option, 두 번째로 이동된 동안 option.예상되는 결과는

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

여기에 예가 있습니다 http://jsbin.com/adAbAMe/2/edit?html,js,콘솔,출력 (딸깍 하는 소리 run with js 결과를 얻기 위해) 이는 다음과 같이 표시됩니다. selected 속성이 변경되었더라도 HTML 코드에서는 변경되지 않습니다.

하지만 성공적인 속성 업데이트가 포함된 externalHTML에서 최종 HTML을 가져와야 합니다. select 어딘가에서는 JavaScript를 사용하기 전에 업데이트한 내용을 얻을 수 없습니다.

실제 속성 값이 포함된 문자열로 HTML을 가져오는 방법이 있습니까?

Answer 1

그만큼 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");
}

여기 작동하는 바이올린이 있습니다.

Answer 2

당신이 사용할 수있는

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

그리고

option.removeAttribute('selected');

Answer 3

노력하다

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

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

데모: 깡깡이

Answer 4

로부터 DOM 사양:

선택된 유형의 부울

대화형 사용자 에이전트에서 해당 양식 컨트롤의 현재 상태를 나타냅니다.이 속성을 변경하면 양식 컨트롤의 상태가 변경됩니다. 하지만 요소의 HTML selected 속성 값은 변경되지 않습니다.

(강조는 내 것)

원하는 효과를 얻으려면 option.setAttribute('selected', 'selected'), 하지만 당신도 필요합니다 option.removeAtrribute('selected') 다른 옵션에.