javascript - selecionar - valor div jquery




Alterar o valor selecionado de uma lista suspensa com jQuery (11)

Eu tenho uma lista suspensa com valores conhecidos. O que estou tentando fazer é definir a lista suspensa para um valor específico que eu sei que existe usando jQuery. Usando JavaScript regular, eu faria algo como:

ddl = document.getElementById("ID of element goes here");
ddl.value = 2; // 2 being the value I want to set it too.

No entanto, eu preciso fazer isso com jQuery, porque eu estou usando uma classe CSS para o meu seletor (IDs estúpidos do cliente ASP.NET ...).

Aqui estão algumas coisas que eu tentei:

$("._statusDDL").val(2); // Doesn't find 2 as a value.
$("._statusDDL").children("option").val(2) // Also failed.

Como posso fazer isso com jQuery?

Atualizar

Então, como aconteceu, eu acertei na primeira vez com:

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

Quando eu coloco um alerta logo acima ele funciona bem, mas quando eu removo o alerta e deixo ele rodar a toda velocidade, recebo o erro

Não foi possível definir a propriedade selecionada. Índice Inválido

Eu não tenho certeza se é um bug com jQuery ou Internet Explorer 6 (eu estou supondo que o Internet Explorer 6), mas é terrivelmente chato.


Então eu mudei para que agora seja executado após 300 milissegundos usando setTimeout. Parece estar funcionando agora.

Eu me deparei com isso muitas vezes ao carregar dados de uma chamada Ajax. Eu também uso o .NET, e leva tempo para se ajustar ao clientId ao usar o seletor jQuery. Para corrigir o problema que você está tendo e evitar ter que adicionar uma propriedade setTimeout , você pode simplesmente colocar " async: false " na chamada do Ajax, e isso dará ao DOM tempo suficiente para ter os objetos de volta que você está adicionando para o select. Uma pequena amostra abaixo:

$.ajax({
    type: "POST",
    url: document.URL + '/PageList',
    data: "{}",
    async: false,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (response) {
        var pages = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;

        $('#locPage' + locId).find('option').remove();

        $.each(pages, function () {
            $('#locPage' + locId).append(
                $('<option></option>').val(this.PageId).html(this.Name)
            );
        });
    }
});

Apenas tente com

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

e não com

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

Apenas uma nota - Eu tenho usado seletores de caractere curinga no jQuery para capturar itens que são ofuscados por IDs de CLI do ASP.NET - isso pode ajudá-lo também:

<asp:DropDownList id="MyDropDown" runat="server" />

$("[id* = 'MyDropDown']").append("<option value='-1'>&nbsp;</option>"); //etc

Observe o id * curinga - isso encontrará seu elemento mesmo que o nome seja "ctl00 $ ctl00 $ ContentPlaceHolder1 $ ContentPlaceHolder1 $ MyDropDown"


Com o campo oculto você precisa usar assim:

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

ou

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

Depois de olhar para algumas soluções, isso funcionou para mim.

Eu tenho uma lista suspensa com alguns valores e quero selecionar o mesmo valor de outra lista suspensa ... Então, primeiro eu coloco em uma variável o selectIndex do meu primeiro drop-down.

var indiceDatos = $('#myidddl')[0].selectedIndex;

Em seguida, seleciono esse índice na minha segunda lista suspensa.

$('#myidddl2')[0].selectedIndex = indiceDatos;

Nota:

Eu acho que esta é a solução mais curta, confiável, geral e elegante.

Porque no meu caso, estou usando o atributo de dados da opção selecionada em vez do atributo value. Então, se você não tem valor único para cada opção, o método acima é o mais curto e doce !!


Essas soluções parecem assumir que cada item em suas listas suspensas tem um valor val () relacionado à sua posição na lista suspensa.

As coisas são um pouco mais complicadas se não for esse o caso.

Para ler o índice selecionado de uma lista suspensa, você usaria isto:

$("#dropDownList").prop("selectedIndex");

Para definir o índice selecionado de uma lista suspensa, você usaria isso:

$("#dropDownList").prop("selectedIndex", 1);

Observe que o recurso prop () requer o JQuery v1.6 ou posterior.

Vamos ver como você usaria essas duas funções.

Suponha que você tivesse uma lista suspensa de nomes de mês.

<select id="listOfMonths">
  <option id="JAN">January</option>
  <option id="FEB">February</option>
  <option id="MAR">March</option>
</select>

Você pode adicionar um botão "Mês anterior" e "Próximo mês", que analisa o item da lista suspensa selecionada no momento e o altera para o mês anterior / seguinte:

<button id="btnPrevMonth" title="Prev" onclick="btnPrevMonth_Click();return false;" />
<button id="btnNextMonth" title="Next" onclick="btnNextMonth_Click();return false;" />

E aqui está o JavaScript que esses botões executariam:

function btnPrevMonth_Click() {
    var selectedIndex = $("#listOfMonths").prop("selectedIndex");
    if (selectedIndex > 0) {
        $("#listOfMonths").prop("selectedIndex", selectedIndex - 1);
    }
}
function btnNextMonth_Click() {
    //  Note:  the JQuery "prop" function requires JQuery v1.6 or later
    var selectedIndex = $("#listOfMonths").prop("selectedIndex");
    var itemsInDropDownList = $("#listOfMonths option").length;

    //  If we're not already selecting the last item in the drop down list, then increment the SelectedIndex
    if (selectedIndex < (itemsInDropDownList - 1)) {
        $("#listOfMonths").prop("selectedIndex", selectedIndex + 1);
    }
}

O site a seguir também é útil para mostrar como preencher uma lista suspensa com dados JSON:

http://mikesknowledgebase.com/pages/Services/WebServices-Page8.htm

Ufa !!

Espero que isto ajude.


Eu uso uma função de extensão para obter IDs de clientes, assim:

$.extend({
    clientID: function(id) {
        return $("[id$='" + id + "']");
    }
});

Então você pode chamar controles ASP.NET em jQuery como este:

$.clientID("_statusDDL")

No meu caso, consegui fazê-lo funcionar usando o método .attr ().

$("._statusDDL").attr("selected", "");

Se tivermos uma lista suspensa com um título "Classificação de dados":

<select title="Data Classification">
    <option value="Top Secret">Top Secret</option>
    <option value="Secret">Secret</option>
    <option value="Confidential">Confidential</option>
</select>

Podemos obtê-lo em uma variável:

var dataClsField = $('select[title="Data Classification"]');

Em seguida, coloque em outra variável o valor que queremos que o dropdown tenha:

var myValue = "Top Secret";  // this would have been "2" in your example

Então podemos usar o campo que colocamos em dataClsField , fazer um find para myValue e selecioná-lo usando .prop() :

dataClsField.find('option[value="'+ myValue +'"]').prop('selected', 'selected');

Ou você poderia apenas usar .val() , mas seu seletor de . só pode ser usado se corresponder a uma classe na lista suspensa, e você deve usar aspas no valor entre parênteses, ou apenas usar a variável que definimos anteriormente:

dataClsField.val(myValue);

A documentação do jQuery declara:

[jQuery.val] verifica ou seleciona todos os botões de opção, caixas de seleção e opções de seleção que correspondem ao conjunto de valores.

Esse comportamento está nas versões 1.2 e posteriores do jQuery .

Você provavelmente quer isso:

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

<asp:DropDownList id="MyDropDown" runat="server" />

Use $("select[name$='MyDropDown']").val() .





html-select