JavaScript를 사용하여 선택 상자 요소의 값을 프로그래밍 방식으로 설정하려면 어떻게합니까? <option value=”14″>Long Service</option> <option value=”17″>Leave Without

다음 HTML <select>요소가 있습니다.

<select id="leaveCode" name="leaveCode">
  <option value="10">Annual Leave</option>
  <option value="11">Medical Leave</option>
  <option value="14">Long Service</option>
  <option value="17">Leave Without Pay</option>
</select>

leaveCode숫자를 매개 변수로 사용하는 JavaScript 함수를 사용 하여 목록에서 적절한 옵션을 어떻게 선택합니까?

답변

이 기능을 사용할 수 있습니다 :

selectElement('leaveCode', '11')

function selectElement(id, valueToSelect) {
    let element = document.getElementById(id);
    element.value = valueToSelect;
}

답변

jQuery를 사용하는 경우 다음을 수행 할 수도 있습니다.

$('#leaveCode').val('14');

<option>값이 14 인를 선택합니다 .

일반 자바 스크립트를 사용하면 다음 두 가지 Document방법으로 도 달성 할 수 있습니다 .

  • 을 사용하면 document.querySelectorCSS 선택기를 기반으로 요소를 선택할 수 있습니다.

    document.querySelector('#leaveCode').value = '14'

  • 와 함께 더 확립 된 접근 방식을 사용하면 document.getElementById()함수의 이름에서 알 수 있듯이 다음을 기반으로 요소를 선택할 수 있습니다 id.

    document.getElementById('leaveCode').value = '14'

아래 코드를 스니핑하여 이러한 메소드와 jQuery 함수가 실제로 작동하는지 확인할 수 있습니다.

코드 스 니펫 표시

const jQueryFunction = () => {

  $('#leaveCode').val('14');

}

const querySelectorFunction = () => {

  document.querySelector('#leaveCode').value = '14'

}

const getElementByIdFunction = () => {

  document.getElementById('leaveCode').value='14'

}
input {
  display:block;
  margin: 10px;
  padding: 10px
}
<select id="leaveCode" name="leaveCode">
  <option value="10">Annual Leave</option>
  <option value="11">Medical Leave</option>
  <option value="14">Long Service</option>
  <option value="17">Leave Without Pay</option>
</select>

<input type="button" value="$('#leaveCode').val('14');" onclick="jQueryFunction()" />
<input type="button" value="document.querySelector('#leaveCode').value = '14'" onclick="querySelectorFunction()" />
<input type="button" value="document.getElementById('leaveCode').value = '14'" onclick="getElementByIdFunction()" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
스 니펫 확장

답변

function setSelectValue (id, val) {
    document.getElementById(id).value = val;
}
setSelectValue('leaveCode', 14);

답변

질문에 대답하지 않지만 색인으로 선택할 수도 있습니다. 여기서 i는 선택하려는 항목의 색인입니다.

var formObj = document.getElementById('myForm');
formObj.leaveCode[i].selected = true;

루프를 사용하여 표시 값으로 선택하기 위해 항목을 반복 할 수도 있습니다.

for (var i = 0, len < formObj.leaveCode.length; i < len; i++)
    if (formObj.leaveCode[i].value == 'xxx') formObj.leaveCode[i].selected = true;

답변

다른 방법을 비교했습니다.

JS 또는 jQuery를 사용하여 선택 값을 설정하는 방법에 대한 다양한 방법 비교

암호:

$(function() {
    var oldT = new Date().getTime();
     var element = document.getElementById('myId');
    element.value = 4;
    console.error(new Date().getTime() - oldT);

    oldT = new Date().getTime();
    $("#myId option").filter(function() {
        return $(this).attr('value') == 4;
    }).attr('selected', true);
    console.error(new Date().getTime() - oldT);

    oldT = new Date().getTime();
    $("#myId").val("4");
    console.error(new Date().getTime() - oldT);
});

~ 4000 개의 요소를 가진 선택에 대한 출력 :

  • 1ms
  • 58ms
  • 612ms

Firefox 10의 경우 참고 :이 테스트를 수행 한 유일한 이유는 jQuery가 ~ 2000 개의 항목으로 목록에서 성능이 저하 되었기 때문입니다 (옵션 사이에 더 긴 텍스트가 있음). val () 후 약 2 초 지연되었습니다.

참고 사항 : 텍스트 값이 아닌 실제 값에 따라 값을 설정하고 있습니다.

답변

document.getElementById('leaveCode').value = '10';

선택을 “연간 휴가”로 설정해야합니다.

답변

위와 같은 JavaScript / jQuery 기반 솔루션을 시도했습니다. 

$("#leaveCode").val("14");

과

var leaveCode = document.querySelector('#leaveCode');
leaveCode[i].selected = true;

필수 <select> 요소 가있는 AngularJS 앱에서

AngularJS 양식 유효성 검사가 시작되지 않기 때문에 어느 것도 작동하지 않습니다. 올바른 옵션이 선택되어 있고 형식으로 표시되었지만 입력이 유효하지 않은 상태 ( ng-pristine 및 ng-invalid) 클래스는 여전히 존재 함).

AngularJS 유효성 검사를 강제하려면 옵션을 선택한 후 jQuery change ()를 호출하십시오 .

$("#leaveCode").val("14").change();

과

var leaveCode = document.querySelector('#leaveCode');
leaveCode[i].selected = true;
$(leaveCode).change();