Jak programowo ustawić wartość elementu zaznaczonego pola za pomocą JavaScript?

Mam następujący <select>element HTML :

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

Używając funkcji JavaScript z leaveCodeliczbą jako parametrem, jak wybrać odpowiednią opcję z listy?

Możesz użyć tej funkcji:

selectElement('leaveCode', '11')

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

Jeśli używasz jQuery, możesz to również zrobić:

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

Spowoduje to wybranie <option>wartości 14.

W przypadku zwykłego Javascript można to również osiągnąć dwiema Documentmetodami :

• Za pomocą document.querySelectormożna wybrać element oparty na selektorze CSS:

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

• Stosując bardziej ugruntowane podejście document.getElementById(), które, jak sugeruje nazwa funkcji, pozwala wybrać element na podstawie jego id:

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

Możesz uruchomić poniższy kod, aby zobaczyć te metody i funkcję jQuery w akcji:

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

Nie odpowiadam na pytanie, ale możesz także wybrać według indeksu, gdzie i jest indeksem elementu, który chcesz wybrać:

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

Możesz także przewijać elementy do wyboru, wyświetlając wartość za pomocą pętli:

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

Porównałem różne metody:

Porównanie różnych sposobów ustawiania wartości wyboru za pomocą JS lub jQuery

kod:

$(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);
});

Wyjście na selekcję z ~ 4000 elementów:

• 1 ms
• 58 ms
• 612 ms

W przeglądarce Firefox 10. Uwaga: jedynym powodem, dla którego przeprowadziłem ten test, było to, że jQuery działał bardzo słabo na naszej liście z ~ 2000 pozycji (miały dłuższe teksty między opcjami). Mieliśmy około 2 s opóźnienia po val ()

Uwaga: ustawiam wartość w zależności od wartości rzeczywistej, a nie wartości tekstowej.

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

To powinno ustawić opcję „Urlop roczny”

Wypróbowałem powyższe rozwiązania oparte na JavaScript / jQuery, takie jak:

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

i

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

w aplikacji AngularJS, gdzie była wymagana <select>.

Żadne z nich nie działa, ponieważ sprawdzanie poprawności formularza AngularJS nie jest uruchamiane. Mimo że wybrano właściwą opcję (i jest wyświetlana w formularzu), dane wejściowe pozostały niepoprawne (klasy N-nieskazitelne i N-niepoprawne nadal istnieją).

Aby wymusić sprawdzanie poprawności AngularJS, wywołaj jQuery change () po wybraniu opcji:

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

i

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

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

Najłatwiejszy sposób, jeśli potrzebujesz:
1) Kliknij przycisk, który określa opcję wyboru
2) Przejdź do innej strony, na której wybierz opcję
3) Wybierz tę wartość opcji na innej stronie

1) linki do przycisków (powiedzmy na stronie głównej)

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

(gdzie contact.php to twoja strona z wybranymi opcjami. Zwróć uwagę, że URL strony ma opcję? = 1 lub 2)

2) umieść ten kod na drugiej stronie (moja sprawa contact.php )

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

3) wybierz wartość opcji w zależności od klikniętego przycisku

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

.. i tak dalej.
Jest to więc prosty sposób na przekazanie wartości do innej strony (z listą opcji wyboru) przez polecenie GET w adresie URL. Bez formularzy, bez dokumentów tożsamości. Tylko 3 kroki i działa idealnie.

Dlaczego nie dodać zmiennej dla identyfikatora elementu i nie nadać jej funkcji wielokrotnego użytku?

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

Załóżmy, że Twój formularz ma nazwę form1 :

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

Powinno być coś w tym stylu:

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

function selecetElement() {
 var selectedValue = document.getElementById('leaveCode');
 selectedValue.value = "11";
}

Jeśli używasz PHP, możesz spróbować czegoś takiego:

$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>';

Najprawdopodobniej chcesz to:

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

LUB

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

Obawiam się, że nie jestem w stanie przetestować tego w tej chwili, ale w przeszłości uważam, że musiałem nadać każdej etykiecie opcji identyfikator, a potem zrobiłem coś takiego:

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

Jeśli to nie zadziała, być może zbliży Cię do rozwiązania: P