it-swarm-ko.tech

JavaScript를 사용하여 프로그래밍 방식으로 선택 상자 요소의 값을 설정하는 방법은 무엇입니까?

다음 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 함수를 사용하면 목록에서 적절한 옵션을 어떻게 선택합니까?

338
brasskazoo
SelectElement("leaveCode", valueToSelect)

function SelectElement(id, valueToSelect)
{    
    var element = document.getElementById(id);
    element.value = valueToSelect;
}
430
Mitchel Sellers

JQuery를 사용한다면 다음과 같이 할 수도있다.

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

그러면 값이 14 인 <option>가 선택됩니다.


일반 자바 스크립트의 경우 Document 메서드 를 사용하여이 작업을 수행 할 수도 있습니다.

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

    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>
96
Einar Ólafsson
function setSelectValue (id, val) {
    document.getElementById(id).value = val;
}
setSelectValue('leaveCode', 14);
28
Andrew Hedges

질문에 답하지 않고 색인으로 선택할 수도 있습니다. 여기서 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;
14
Chase Seibert

나는 다른 방법들을 비교했다.

JS 또는 jQuery를 사용하여 select 값을 설정하는 방법에 대한 여러 가지 방법의 비교

암호:

$(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 요소로 선택에 출력 :

1 ms

58 ms

612 ms

참고 :이 테스트를 수행 한 유일한 이유는 jQuery가 ~ 2000 개 항목 (옵션 사이에 긴 텍스트가 있음)이 포함 된 목록에서 제대로 실행되지 않았기 때문입니다. 우리는 val () 후에 약 2 초가 지연되었습니다.

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

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

그 선택을 "연차 휴가"로 설정해야합니다.

9
William

위의 JavaScript/jQuery 기반 솔루션을 시도했다 :

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

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

angularJS 앱에서 필수 <select> 요소가있는 위치에 있습니다.

AngularJS 양식 유효성 검증이 실행되지 않기 때문에 이들 중 아무 것도 작동하지 않습니다. 올바른 옵션이 선택되었지만 형식으로 표시 되더라도 입력은 여전히 ​​유효하지 않습니다 (ng-pristineng-invalid 클래스는 여전히 존재합니다).

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

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

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

function foo(value)
{
    var e = document.getElementById('leaveCode');
    if(e) e.value = value;
}
3
mmattax

필요한 경우 가장 쉬운 방법은 다음과 같습니다.
1) 선택 옵션을 정의하는 버튼을 클릭합니다.
2) 다른 페이지로 이동하십시오.
3) 다른 페이지에서 옵션 값을 선택하십시오.

1) 귀하의 버튼 링크 (예 : 홈페이지)

<a onclick="location.href='contact.php?option=1';" style="cursor:pointer;">Sales</a>
<a onclick="location.href='contact.php?option=2';" style="cursor:pointer;">IT</a>

(여기서 contact.php 는 선택 옵션이있는 페이지입니다. 페이지 URL에? option = 1 또는 2가 있음에 유의하십시오)

2) 이 코드를 두 번째 페이지에 입력하십시오 (내 사례 contact.php ).

<?
if (isset($_GET['option']) && $_GET['option'] != "") {
$pg = $_GET['option'];              
} ?>

3) 클릭 한 버튼에 따라 옵션 값을 선택하십시오.

<select>
<option value="Sales" <? if ($pg == '1') { echo "selected"; } ?> >Sales</option>
<option value="IT" <? if ($pg == '2') { echo "selected"; } ?> >IT</option>
</select>

.. 등등.
따라서 URL에서 GET을 통해 다른 페이지 (선택 옵션 목록 포함)에 값을 전달하는 쉬운 방법입니다. 양식 없음, ID 없음 .. 3 단계만으로 완벽하게 작동합니다.

3
Lana

이 줄을 따라 뭔가 있어야합니다 :

function setValue(inVal){
var dl = document.getElementById('leaveCode');
var el =0;
for (var i=0; i<dl.options.length; i++){
  if (dl.options[i].value == inVal){
    el=i;
    break;
  }
}
dl.selectedIndex = el;
}
1
Stephen Wrighton

양식 이름이 form1 이라고 가정합니다.

function selectValue(val)
{
  var lc = document.form1.leaveCode;
  for (i=0; i&lt;lc.length; i++)
  {
    if (lc.options[i].value == val)
    {
        lc.selectedIndex = i;
        return;
    }
  }
}
1
Milan Babuškov

요소의 Id에 대한 변수를 추가하고 재사용 가능한 함수로 만드는 것이 좋을까요?

function SelectElement(selectElementId, valueToSelect)
{    
    var element = document.getElementById(selectElementId);
    element.value = valueToSelect;
}
1
Robert Swisher

당신은 이것을 원할 가능성이 큽니다 :

$("._statusDDL").val('2');

OR

$('select').prop('selectedIndex', 3); 
0
user5846985