JavaScript를 사용하여 선택 상자 요소의 값을 프로그래밍 방식으로 설정하려면 어떻게 해야 합니까?

Question

나는 다음 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>

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

Answer 1

SelectElement("leaveCode", valueToSelect)

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

Answer 2

jQuery를 사용하는 경우 다음과 같이 할 수도 있습니다.

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

그러면 다음이 선택됩니다. <option> 값은 14입니다.

---

일반 Javascript를 사용하면 두 가지 방법으로 이를 달성할 수도 있습니다. 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>

Answer 3

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

Answer 4

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

Answer 5

다양한 방법을 비교했습니다.

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

파이어폭스 10으로.메모:내가 이 테스트를 수행한 유일한 이유는 ~2000개의 항목이 포함된 목록에서 jQuery의 성능이 매우 저조했기 때문입니다(옵션 사이에 더 긴 텍스트가 있음).val() 이후 약 2초의 지연이 발생했습니다.

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

Answer 6

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

그러면 선택 항목이 "연간 휴가"로 설정되어야 합니다.

Answer 7

나는 다음과 같은 위의 JavaScript/jQuery 기반 솔루션을 시도했습니다.

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

그리고

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

AngularJS 앱에는 필수의 <선택> 요소.

AngularJS 양식 유효성 검사가 실행되지 않기 때문에 그 중 어느 것도 작동하지 않습니다.올바른 옵션을 선택했지만(양식에 표시됨) 입력이 유효하지 않은 상태로 유지되었습니다(ng-원래의 그리고 ng-잘못됨 수업은 아직 진행 중입니다).

AngularJS 유효성 검사를 강제하려면 jQuery를 호출하세요. 변화() 옵션을 선택한 후:

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

그리고

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

Answer 8

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

Answer 9

필요한 경우 가장 쉬운 방법은 다음과 같습니다.
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을 통해 값을 다른 페이지(선택 옵션 목록 포함)로 전달하는 쉬운 방법입니다.양식도 없고 신분증도 없고..단 3단계만 거치면 완벽하게 작동합니다.

Answer 10

요소의 ID에 대한 변수를 추가하고 재사용 가능한 함수로 만드는 것은 어떨까요?

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

Answer 11

양식의 이름이 지정되었다고 가정합니다. 양식 1:

function selectValue(val)
{
  var lc = document.form1.leaveCode;
  for (i=0; i<lc.length; i++)
  {
    if (lc.options[i].value == val)
    {
        lc.selectedIndex = i;
        return;
    }
  }
}

Answer 12

다음과 같은 내용이어야 합니다.

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;
}

Answer 13

아마도 당신은 이것을 원할 것입니다:

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

또는

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

Answer 14

PHP를 사용하는 경우 다음과 같이 시도해 볼 수 있습니다.

$value = '11';
$first = '';
$second = '';
$third = '';
$fourth = '';

switch($value) {
            case '10' :
                $first = 'selected';
            break;
            case '11' :
                $second = 'selected';
            break;
            case '14' :
                $third = 'selected';
            break;
            case '17' :
                $fourth = 'selected';
            break;
        }

echo'
<select id="leaveCode" name="leaveCode">
  <option value="10" '. $first .'>Annual Leave</option>
  <option value="11" '. $second .'>Medical Leave</option>
  <option value="14" '. $third .'>Long Service</option>
  <option value="17" '. $fourth .'>Leave Without Pay</option>
</select>';

Answer 15

지금은 이것을 테스트할 수 없습니다. 하지만 과거에는 각 옵션 태그에 ID를 제공해야 했고 다음과 같은 작업을 수행했습니다.

document.getElementById("optionID").select();

그래도 문제가 해결되지 않으면 해결책에 더 가까워질 수 있습니다. :P