it-swarm-eu.dev

Jak programově nastavím hodnotu prvku výběru pomocí JavaScriptu?

Mám následující prvek 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>

Jak mohu vybrat vhodnou možnost v seznamu pomocí funkce JavaScript s leaveCode number jako parametr?

343
brasskazoo
SelectElement("leaveCode", valueToSelect)

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

Pokud používáte jQuery, můžete to udělat také:

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

Tím vyberete <option> s hodnotou 14.


S obyčejným Javascriptem toho lze také dosáhnout dvěma Documentmetody :

  • Pomocí document.querySelector můžete vybrat prvek na základě selektoru CSS:

    document.querySelector('#leaveCode').value = '14'
    
  • Díky zavedenějšímu přístupu s document.getElementById() , to, jak napovídá název funkce, vám umožní vybrat prvek na základě jeho idname__:

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

Chcete-li vidět tyto metody a funkci jQuery v akci, můžete spustit výstřižek z kódu níže:

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

Neodpovídá na otázku, ale můžete také vybrat podle indexu, kde i je index položky, kterou chcete vybrat:

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

Můžete také procházet mezi položkami a vybírat podle hodnoty zobrazení pomocí smyčky:

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

Porovnal jsem různé metody:

Porovnání různých způsobů, jak nastavit hodnotu výběru pomocí JS nebo jQuery

kód:

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


});

Výstup na výběru s ~ 4000 prvky:

1 ms

58 ms

612 ms

V prohlížeči Firefox 10. Poznámka: Jediným důvodem, proč jsem tento test provedl, bylo to, že jQuery na našem seznamu vedl velmi špatně s ~ 2000 vstupy (mezi možnostmi byly delší texty). Měli jsme zhruba 2 s zpoždění po val ()

Poznámka: Také nastavuji hodnotu v závislosti na skutečné hodnotě, nikoli na textové hodnotě

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

To by mělo nastavit výběr na „Roční dovolená“

9
William

Vyzkoušel jsem výše uvedená řešení založená na JavaScriptu/jQuery, jako například:

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

a

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

v aplikaci AngularJS, kde byl vyžadován prvek <select>.

Žádná z nich nefunguje, protože není spuštěna validace formuláře AngularJS. Ačkoli byla vybrána správná možnost (a je zobrazena ve formuláři), vstup zůstal neplatný ( ng-nedotčený a ng-neplatné třídy stále přítomny).

Chcete-li vynutit ověření AngularJS, volejte jQuery change () po výběru možnosti:

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

a

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

Nejjednodušší způsob, pokud potřebujete:
1) Klikněte na tlačítko, které definuje možnost výběru
2) Přejít na jinou stránku, kde je možnost výběru
3) Nechte tuto možnost volby vybrat na jiné stránce

1) odkazy na vaše tlačítka (řekněme na domovské stránce)

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

(kde contact.php je vaše stránka s vybranými možnostmi. Všimněte si, že adresa URL stránky obsahuje? option = 1 nebo 2)

2) umístěte tento kód na druhou stránku (můj případ contact.php)

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

) provede výběr hodnoty možnosti v závislosti na kliknutí na tlačítko

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

.. a tak dále.
Toto je snadný způsob, jak předat hodnotu na jinou stránku (s výběrem seznamu možností) prostřednictvím GET v url. Žádné formuláře, žádná ID .. jen 3 kroky a funguje to perfektně.

3
Lana

Mělo by to být něco v tomto smyslu:

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

Předpokládejme, že je váš formulář pojmenován 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

Proč nepřidat proměnnou pro ID prvku a učinit z něj opakovaně použitelnou funkci?

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

Nejpravděpodobněji budete chtít:

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

OR

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