El uso de Jquery para agregar elementos en el cuadro de lista del cuadro de texto

Estoy atascado en algún lugar de usar jquery para anexar el cuadro de lista de un cuadro de texto.

aquí está mi jquery

  $("#btnAddSvc").click(function () {
        var svc = $("#<%= txtServiceName.ClientID %>").val();  //Its Let you know the textbox's value   
        svc.appendTo("#<%=lstSvcName.ClientID %>");
    }); 

Estoy usando asp.net (c#) para desarrollar mi código

<asp:Button ID="btnAddSvc" runat="server" Text=">>" Font-Size="Medium" />
<asp:ListBox ID="lstSvcName" runat="server" SelectionMode="Multiple" ToolTip="Selected Service Names"
                Width="169px"></asp:ListBox>

por favor alguien puede ayudar ya que no soy capaz de obtener los valores en el cuadro de lista.

InformationsquelleAutor Pratik | 2012-07-06

3 Kommentare

  1. 7

    El selector de jQuery $() falta "#<%=lstSvcName.ClientID %>" así que usted conseguirá id de lstSvcName en lugar de object.

    También he cambiado el anexar declaración de que no tiene una sintaxis correcta.

    "#<%=lstSvcName.ClientID %>"

    sería

    $("#<%=lstSvcName.ClientID %>")

    El código se convertirá en

    $("#<%= btnAddSvc.ClientID %>").click(function () {
          var svc = $("#<%= txtServiceName.ClientID %>").val();  //Its Let you know the textbox's value   
          $("#<%=lstSvcName.ClientID %>").append('<option value="'+svc+'">item '+svc+'</option>');
          return false;
    }); 

    EDITAR [ Más funcionalidad solicitada por la cooperativa para elementos únicos en el ListBox y limpieza de cuadro de texto]

    $("#<%= btnAddSvc.ClientID %>").click(function () {
        var txt = $("#<%= txtServiceName.ClientID %>");
        var svc = $(txt).val();  //Its Let you know the textbox's value   
        var lst = $("#<%=lstSvcName.ClientID %>");
        var options = $("#<%=lstSvcName.ClientID %> option");
        var alreadyExist = false;
        $(options).each(function () {
            if ($(this).val() == svc) {
                alert("Item alread exists");
                alreadyExist = true;
                return;
            }
            txt.val("");
            //alert($(this).val());
        });
        if(!alreadyExist)
                $(lst).append('<option value="' + svc + '">' + svc + '</option>');
        return false;
    });
    • Pruébalo ahora, usted tenía mal la sintaxis para agregar elemento de cuadro de lista, comprobación de ahora
    • Surprisigly este es también no funciona : (¿por qué se han incluido 5</opción> lo que 5 significa aquí
    • Fue error de escritura y ya lo he quitado, me permiten comprobar por qué no su trabajo
    • Su trabajo, no sé por qué no está trabajando a su lado. Has incluido jquery archivo? y se coloca esta secuencia de comandos en el lugar adecuado. Hacer algo de depuración se debe trabajar. También tomar el último código de respuesta no puede tener más reciente.
    • Aquí está mi respuesta para la depuración de javascript que puede ayudar a usted stackoverflow.com/questions/10573819/…
    • Muchas gracias adil por su ayuda creo que me podría haber perdido algo, pero con el mismo código de raaghav comenzó a trabajar para mí 🙂
    • Usted es bienvenido, he encontrado lo que faltaba de su lado, darle una oportunidad ahora, y se actualiza el código de respuesta.
    • Sí su trabajo ahora 🙂 soy novato en el mundo de jquery srry por la trobuble pero puedo preguntar ur ayudar en promting usuario que el valor ya existe i lista de selección y claro también el cuadro de texto
    • permítanos continuar esta discusión en el chat

  2. 1

    Intentar algo como esto. Esto puede ayudar a usted. Cambiar el valor de retorno para su comodidad.

       $('#<%= btnAddSvc.ClientID %>').click(function () {
                $textbox = $('#<%= txtServiceName.ClientID %>');
                $listbox = $('#<%= lstSvcName.ClientID %>');
                $listbox.append($('<option></option>').attr('value', $textbox.val()).text($textbox.val()));
                return false;
            });
    • Esto es genial, gracias por su ayuda : Uno más necesita ayuda ¿cómo puedo evitar los duplicados y eliminar también las de eliminar la pulsación de tecla
    • Lo siento por el retraso. Yo dint vienen en línea en estos días. @PratikGupta , Intentar algo como esto para eliminar $('#<%= btnDelete.ClientID %>').click(function() { $listBox = $('#<%= lstBox.ClientID %>'); $selectedItem = $listBox.find('option:selected'); $selectedItem.remove(); return false; });
    • Acabo de probar estas líneas de código para comprobar las entradas duplicadas. No estoy seguro de que esto funcionará. Intentar modificar algunas líneas y tratar. $textbox = $('#<%= txtText.ClientID %>'); for (var i = 0, j = selectObject.options.length; i < j; i++) { if(selectObject.options[i].value==$textbox.val()) { alert('This Item already exists'); e.preventDefault(); } }
  3. 1

    Puede hacerlo utilizando jquery manipulando el DOM pero… Ahora hay una forma más elegante de hacerlo: un método orientado (usando MVVM – Model View ViewModel), utilizando knockoutjs

    Knockoutjs Paquete De Nuget

    Crea un enlace a la lista sólo la adición de data-bind="options: elements" a su lista, y que siempre se trabaja con objetos, nunca con elementos del DOM, en este ejemplo yo tengo una matriz de cadenas, pero usted puede crear objetos personalizados y se unen a ellas utilizando sólo una pequeña variación en la sintaxis

    La forma de hacerlo es:

    <script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="Scripts/knockout-2.1.0.js"></script>
    <script type="text/javascript">
        $(function () {
            var model = {
                elements: ko.observableArray(),
                addElement: function () {
                    this.elements.push($("#<%= this.newElement.ClientID %>").val());
                }
            };
    
            ko.applyBindings(model);
        });
    </script>
    
    
        <asp:ListBox runat="server" ID="myListbox" Rows="10" Width="25%" data-bind="options: elements">
        </asp:ListBox>
        <br />
        <asp:TextBox runat="server" ID="newElement"></asp:TextBox>
        <input type="button" id="addElement" value="Add element" data-bind="click: addElement" />

    Este es el resultado:

    El uso de Jquery para agregar elementos en el cuadro de lista del cuadro de texto

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Recent Articles

Python «set» con duplicados/elementos repetidos

Hay una forma estándar de representar un "conjunto" que puede contener elementos duplicados. Como yo lo entiendo, un conjunto tiene exactamente un cero o...

Python: generador de expresión vs rendimiento

En Python, ¿hay alguna diferencia entre la creación de un generador de objetos a través de un generador de expresión versus el uso de...

Cómo exportar/importar la Masilla lista de sesiones?

Hay una manera de hacer esto? O tengo que tomar manualmente cada archivo de Registro? InformationsquelleAutor s.webbandit | 2012-10-23

no distingue mayúsculas de minúsculas coincidentes en xpath?

Por ejemplo, para el xml a continuación <CATALOG> <CD title="Empire Burlesque"/> <CD title="empire burlesque"/> <CD...