드롭 다운 자바 스크립트에서 값을 선택하는 방법은 무엇입니까?

드롭 다운 자바 스크립트에서 값을 선택하는 방법은 무엇입니까?

---

이런 드롭 다운이 있습니다

<select style="width: 280px" id="Mobility" name="Mobility">
  <option selected="">Please Select</option>
  <option>K</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
  <option>11</option>
  <option>12</option>
</select>

이 줄을 사용하여 IE가 아닌 Mozilla에서 작동하는 값을 선택합니까? 왜 작동하지 않습니까?

var element = document.getElementById("Mobility");
element.value = "10";

---

selectedIndex속성 사용 :

document.getElementById("Mobility").selectedIndex = 12; //Option 10

다른 방법 :

각 값을 반복합니다.

//Get select object
var objSelect = document.getElementById("Mobility");

//Set selected
setSelectedValue(objSelect, "10");

function setSelectedValue(selectObj, valueToSet) {
    for (var i = 0; i < selectObj.options.length; i++) {
        if (selectObj.options[i].text== valueToSet) {
            selectObj.options[i].selected = true;
            return;
        }
    }
}

---

가장 쉬운 방법은 이것을 사용하는 것입니다

document.getElementById("mySelect").value = "banana";

myselect는 드롭 다운 목록의 이름입니다. banana는 드롭 다운 목록의 항목 중 하나 일뿐입니다.

---

function setSelectedIndex(s, v) {
    for ( var i = 0; i < s.options.length; i++ ) {
        if ( s.options[i].value == v ) {
            s.options[i].selected = true;
            return;
        }
    }
}

여기서 s는 드롭 다운이고 v는 값입니다.

---

가치를 안다면 가장 간단한 해결책

document.querySelector('option[value=" + value +"]').selected = true

---

나는 이것이 오래된 질문이라는 것을 알고 있지만 다른 사람들이 James Hill의 답변 (위)을 구현할 때와 동일한 상황에 처할 경우를 대비하여 내 사용 사례에 대한 솔루션을 게시 할 것입니다 .

같은 문제를 해결하는 동안이 질문을 찾았습니다. 제임스의 대답 은 저에게 90 %가되었습니다. 그러나 내 사용 사례의 경우 드롭 다운에서 항목을 선택하면 드롭 다운의 onchange이벤트 에서 페이지에 대한 작업도 트리거되었습니다 . 작성된 James의 코드 는이 이벤트를 트리거하지 않았습니다 (적어도 내가 테스트 한 Firefox에서는). 그 결과 다음과 같은 사소한 변경을했습니다.

function setSelectedValue(object, value) {
    for (var i = 0; i < object.options.length; i++) {
        if (object.options[i].text === value) {
            object.options[i].selected = true;
            object.onchange();
            return;
        }
    }

    // Throw exception if option `value` not found.
    var tag = object.nodeName;
    var str = "Option '" + value + "' not found";

    if (object.id != '') {
        str = str + " in //" + object.nodeName.toLowerCase()
              + "[@id='" + object.id + "']."
    }

    else if (object.name != '') {
        str = str + " in //" + object.nodeName.toLowerCase()
              + "[@name='" + object.name + "']."
    }

    else {
        str += "."
    }

    throw str;
}

원래 솔루션에object.onchange() 추가 한 호출에 유의하십시오 . 페이지에서 작업이 발생하는지 확인하기 위해 처리기를 호출합니다.

편집하다

옵션을 value찾을 수없는 경우 예외를 발생시키는 코드를 추가했습니다 . 이것은 내 사용 사례에 필요합니다.

---

이것은 할 수 있습니다

document.forms['someform'].elements['someelement'].value

---

자바 스크립트 사용 :

document.getElementById('drpSelectSourceLibrary').value = 'Seven';

Jquery 사용 :

$('select').prop('selectedIndex', 3); // This will select the 4th option from the dropdown list

---

Yes. As mentioned in the posts, value property is nonstandard and does not work with IE. You will need to use the selectedIndex property to achieve this. You can refer to the w3schools DOM reference to see the properties of HTML elements. The following link will give you the list of properties you can work with on the select element.

http://www.w3schools.com/jsref/dom_obj_select.asp

Update

This was not supported during 2011 on IE. As commented by finnTheHuman, it is supported at present.

---

Instead of doing

function setSelectedIndex(s, v) {
    for ( var i = 0; i < s.options.length; i++ ) {
        if ( s.options[i].value == v ) {
            s.options[i].selected = true;
            return;
        }
    }
}

I solved this problem by doing this

function setSelectedValue(dropDownList, valueToSet) {
    var option = dropDownList.firstChild;
    for (var i = 0; i < dropDownList.length; i++) {
        if (option.text.trim().toLowerCase() == valueToSet.trim().toLowerCase()) {
            option.selected = true;
            return;
        }
        option = option.nextElementSibling;
    }
}

If you work with strings, you should use the .trim() method, sometimes blank spaces can cause trouble and they are hard to detect in javascript debugging sessions.

dropDownList.firstChild will actually be your first option tag. Then, by doing option.nextElementSibling you can go to the next option tag, so the next choice in your dropdownlist element. If you want to get the number of option tags you can use dropDownList.length which I used in the for loop.

Hope this helps someone.

---

Using some ES6:

Get the options first, filter the value based on the option and set the selected attribute to true.

window.onload = () => {

  Array.from(document.querySelector(`#Mobility`).options)
    .filter(x => x.value === "12")[0]
    .setAttribute('selected', true);

};

<select style="width: 280px" id="Mobility" name="Mobility">
  <option selected disabled>Please Select</option>
  <option>K</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
  <option>11</option>
  <option>12</option>
</select>

---

You can solve this With Javascript like:

var newValue = "testing";
document.getElementById('id_Of_the_select_tag').value = value;

Or with Jquery like this:

var newValue = "testing";

$("#id_Of_the_select_tag").val(newValue);

참고URL : https://stackoverflow.com/questions/8140862/how-to-select-a-value-in-dropdown-javascript