first - ¿Cómo puedo establecer el valor de un DropDownList usando jQuery?

select jquery select value

Question

Como dice la pregunta, ¿cómo establezco el valor de un control DropDownList usando jQuery?

Answer 1

// Formato HTML de la lista desplegable.

<select id="MyDropDownList">
<option value=test1 selected>test1</option>
<option value=test2>test2</option>
<option value=test3>test3</option>
<option value=test4>test4</option>

// Si desea cambiar el elemento seleccionado a test2 usando javascript. Prueba este. // configura la siguiente opción u quieres seleccionar

var NewOprionValue = "Test2"

        var RemoveSelected = $("#MyDropDownList")[0].innerHTML.replace(''selected'', '''');
        var ChangeSelected = RemoveSelected.replace(NewOption, NewOption + ''selected>'');
        $(''#MyDropDownList'').html(ChangeSelected);

Answer 2

Aquí hay una función hecha para configurar rápidamente la opción seleccionada:

function SetSelected(elem, val){
        $(''#''+elem+'' option'').each(function(i,d){
        //  console.log(''searching match for ''+ elem + ''  '' + d.value + '' equal to ''+ val);
            if($.trim(d.value).toLowerCase() == $.trim(val).toLowerCase()){
        //      console.log(''found match for ''+ elem + ''  '' + d.value);
                $(''#''+elem).prop(''selectedIndex'', i);
            }
        });
    }

Llame a esta función con el elemento de argumento id y el valor seleccionado; Me gusta esto:

SetSelected(''selectID'',''some option'');

Es útil cuando hay muchas opciones de selección para configurar.

Answer 3

Creo que esto puede ayudar:

    $.getJSON(''<%= Url.Action("GetDepartment") %>'', 
              { coDepartment: paramDepartment },
              function(data) {
                    $(".autoCompleteDepartment").empty();
                    $(".autoCompleteDepartment").append($("<option />").val(-1));
                    $.each(data, function() {
                        $(".autoCompleteDepartment").append($("<option />").val(this.CodDepartment).text(this.DepartmentName));
                    });
                    $(".autoCompleteDepartment").val(-1);                                       
              }  
             );

Si lo haces de esta manera, agregas un elemento sin texto. Por lo tanto, cuando hace clic en de combo, no aparece, pero el valor -1 que agregó una selección posterior con $ (". AutoCompleteDepartment"). Val (-1); le permite controlar si el combo tiene un valor válido.

Espero que ayude a nadie.

Lo siento por mi ingles.

Answer 4

El uso de la respuesta resaltada / marcada anteriormente funcionó para mí ... aquí hay una pequeña perspectiva. Hice un poco de trampa al obtener la URL, pero básicamente estoy definiendo la URL en el Javascript y luego configurándola a través de la respuesta jquery desde arriba:

<select id="select" onChange="window.location.href=this.value">
    <option value="">Select a task </option>
    <option value="http://127.0.0.1:5000/choose_form/1">Task 1</option>
    <option value="http://127.0.0.1:5000/choose_form/2">Task 2</option>
    <option value="http://127.0.0.1:5000/choose_form/3">Task 3</option>
    <option value="http://127.0.0.1:5000/choose_form/4">Task 4</option>
    <option value="http://127.0.0.1:5000/choose_form/5">Task 5</option>
    <option value="http://127.0.0.1:5000/choose_form/6">Task 6</option>
    <option value="http://127.0.0.1:5000/choose_form/7">Task 7</option>
    <option value="http://127.0.0.1:5000/choose_form/8">Task 8</option>
</select>
<script>
    var pathArray = window.location.pathname.split( ''/'' );
    var selectedItem = "http://127.0.0.1:5000/" + pathArray[1] + "/" + pathArray[2];
    var trimmedItem = selectedItem.trim();
    $("#select").val(trimmedItem);
</script>

Answer 5

Establecer el valor selected drop-down y actualizar los cambios

$("#PR2DistrictId option[value=''@Model.PR2DistrictId'']").attr("selected", true).trigger("chosen:updated")

Aquí primero establecemos el valor del Model y luego lo actualizamos en el elegido

Answer 6

Hay muchas maneras de hacerlo. Éstos son algunos de ellos:

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

O

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

En este artículo hay diferentes formas de seleccionar el valor desplegable utilizando Jquery .

Answer 7

Pruebe este enfoque muy simple:

/*make sure that value is included in the options value of the dropdownlist 
e.g. 
(<select><option value=''CA''>California</option><option value=''AK''>Alaska</option>      </select>)
*/

$(''#mycontrolId'').val(myvalue).attr("selected", "selected");

Answer 8

Según lo sugerido por @Nick Berardi, si su valor modificado no se refleja en el extremo delantero de la interfaz de usuario, intente:

$("#mydropdownlist").val("thevalue").change();

Answer 9

Si su menú desplegable es Asp.Net, entonces el código de abajo funcionará bien,

 $("#<%=DropDownName.ClientID%>")[0].selectedIndex=0;

Pero si su DropDown es HTML desplegable, entonces este código funcionará.

 $("#DropDownName")[0].selectedIndex=0;

Answer 10

La mejor respuesta para la pregunta:

$("#comboboxid").val(yourvalue).trigger("chosen:updated");

p.ej:

$("#CityID").val(20).trigger("chosen:updated");

o

$("#CityID").val("chicago").trigger("chosen:updated");

Answer 11

Si trabaja con un índice, puede establecer el índice seleccionado directamente con .attr ():

$("#mydropdownlist").attr(''selectedIndex'', 0);

Esto lo establecerá en el primer valor en la lista desplegable.

Edit: La forma en que lo hice anteriormente solía trabajar. Pero parece que ya no.

Pero como Han señala tan agradablemente en los comentarios, la forma correcta de hacerlo es:

$("#mydropdownlist").get(0).selectedIndex = index_here;

Answer 12

En caso de que cuando cargues todas las <options ....></options> mediante una llamada Ajax
Siga estos pasos para hacer esto.

1). Crear un método separado para establecer el valor de la lista desplegable
Por ejemplo:

function set_ip_base_country(countryCode)
    $(''#country'').val(countryCode)
} 

2). Llame a este método cuando ajax call success all html append complete.

Por ejemplo:

success: function (doc) {
  .....
  .....
  $("#country").append(''<option style="color:black;" value="'' + key + ''">''  +   value + ''</option>'')
  set_ip_base_country(ip_base_country)
}

Answer 13

Tratar:

jQuery("#availability option:selected").val();

O para obtener el texto de la opción, use text ():

jQuery("#availability option:selected").text();

Más información:

 http://api.jquery.com/val/
 http://api.jquery.com/text/

$(document).ready(function(){ 
  $(''#button1'').click(function(){ 
    alert($(''#combo :selected'').text());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="combo">
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
</select>
<input id="button1" type="button" value="Click!" />

Answer 14

$("#mydropdownlist").val("thevalue");

solo asegúrese de que el valor en las etiquetas de opciones coincida con el valor en el método val.