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

420

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?

brasskazoo
źródło
zobacz moją odpowiedź na porównanie wydajności dla różnych metod
Toskan

Odpowiedzi:

532

Możesz użyć tej funkcji:

selectElement('leaveCode', '11')

function selectElement(id, valueToSelect) {    
    let element = document.getElementById(id);
    element.value = valueToSelect;
}
Sprzedawcy Mitchel
źródło
4
Świetna odpowiedź, jest to o wiele łatwiejsze niż przeglądanie opcji. I jest zgodny ze standardami: dev.w3.org/html5/spec/… . Jeśli występują niezgodności przeglądarki (oczywiście są :) Bardzo chciałbym wiedzieć, co to jest. Jest to coś, na co zwykle liczysz na ppk, ale uparcie odmawia pojawienia się w moich poszukiwaniach tego tematu.
philo
9
A co z wieloma selekcjami? Wydaje się, że to nie działa w przypadku wielu opcji (przynajmniej w Chrome 25).
Georgii Ivankin
2
Jak wskazał @ ring0, gdy valueToSelect nie istnieje, wstawia pusty wpis w chrome. podczas gdy IE i Firefox zachowują ostatnio wybraną wartość.
Karthik Bose
1
Uwaga dla IE: <opcja> musi mieć atrybut value = 'valueToSelect'. Nie można używać wyświetlanego tekstu w <option> .. </option> jako valueToSelect
Peter Quiring
4
Jeśli chcesz wystrzelić zdarzenie zmiany, powinieneś również: element.dispatchEvent(new Event('change'));
Patrick James McDougle
120

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:

Einar Ólafsson
źródło
4
Można to również wykorzystać do wielokrotnego wyboru; po prostu przekaż tablicę ciągów do funkcji „val” zamiast pojedynczego ciągu. Zobacz: stackoverflow.com/a/16583001/88409
Triynko,
Czy istnieje sposób, aby w ten sposób uruchomić $ ('# LeaveCode'). On ('zmień', function ()?)
Lieuwe,
5
$ („# LeaveCode”). val („14”). change ();
Loren
29
function setSelectValue (id, val) {
    document.getElementById(id).value = val;
}
setSelectValue('leaveCode', 14);
Andrew Hedges
źródło
16

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;
Chase Seibert
źródło
4
Nie powinien formObj.leaveCode [i] .selected = true; być formObj.options [i] .selected = true; ?
David Christopher Reynolds
14

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.

Toskan
źródło
10
document.getElementById('leaveCode').value = '10';

To powinno ustawić opcję „Urlop roczny”

William
źródło
9

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();
lumi77
źródło
Po co do tego używać jQuery, skoro można to zrobić już za pomocą Angulara? Podczas korzystania z samego Angulara nie masz możliwości ustawienia wartości, z wbudowaną obsługą wyzwalania zmiany (nie mam pojęcia, używam React, właśnie znalazłem ten post po 5 sekundach w Google: stackoverflow.com/questions/ 50302062 /… )? Ponieważ oznaczałoby to, że nie musisz włamać się do Angulara z dodatkową biblioteką ± 30kb „tylko do tego” :)
SidOfc
3

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

mmattax
źródło
3

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.

Lana
źródło
1

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;
}
Robert Swisher
źródło
1

Załóżmy, że Twój formularz ma nazwę 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;
    }
  }
}
Milan Babuškov
źródło
1

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;
}
Stephen Wrighton
źródło
0
function selecetElement() {
 var selectedValue = document.getElementById('leaveCode');
 selectedValue.value = "11";
}
Partha Mukherjee
źródło
2
Dodając odpowiedź do jedenastoletniego pytania z szesnastoma istniejącymi odpowiedziami, bardzo ważne jest wskazanie, jaki nowy aspekt pytania dotyczy twoich odpowiedzi. Jeśli tego nie zrobisz, a Twoja zmiana jest subtelna, możesz ją pominąć, a twoja odpowiedź zostanie usunięta jako późny duplikat. Tylko odpowiedzi na kod można prawie zawsze poprawić, dodając wyjaśnienie, w jaki sposób i dlaczego działają.
Jason Aller
-1

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>';
almyz125
źródło
-1

Najprawdopodobniej chcesz to:

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

LUB

$('select').prop('selectedIndex', 3); 
Makyen
źródło
8
Zakłada się jednak, że OP używa JQuery
Barry Michael Doyle
2
@BarryMichaelDoyle, co nie jest, ponieważ nawet tytuł pytań kończy się na using JavaScript.
Iulian Onofrei
-6

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

Lucas Oman
źródło
3
HTMLOptionElement nie posiada select()metody (nie określa żadnych dodatkowych metod ponad standardowego zestawu na temat wszystkich elementów HTML). Można jednak ustawić selectedwłaściwość na true.
MrWhite