1Future Ответов: 2

Как получить значения из выбранного элемента в listbox in ASP.NET веб-формы с javascript/jquery

Всем Привет,
Новичок в клиентском программировании, и я надеялся, что кто-то сможет помочь мне в достижении этой цели.

У меня есть следующее ниже в моем проекте

Код разметки
<form id="form1" runat="server">
    <div>
    <asp:ListBox runat="server" ID="MultiSelect" AutoPostBack="true" SelectionMode="multiple" OnSelectedIndexChanged="MultiSelect_SelectedIndexChanged">
                               
                            
    </div>
        <div>
            <p>The Selected Value is:</p><asp:TextBox  ID="listBoxValue" runat="server" >
        </div>
    </form>


с фоновым кодом:

public partial class list_show : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                MultiSelect.Items.Add(new ListItem { Text = "John Doe", Value = "1" });
 
                MultiSelect.Items.Add(new ListItem { Text = "Jane Doe", Value = "2" });
                
            } 
        }
 
        protected void MultiSelect_SelectedIndexChanged(object sender, EventArgs e)
        {
            listBoxValue.Text = MultiSelect.SelectedItem.Text;
        }
    }


Как я могу добиться того же самого, но с помощью javascript/jquery?

Что я уже пробовал:

Я написал код в бэкэнде, но мне просто нужно сделать то же самое, поэтому я читал о jquery и javascript

2 Ответов

Рейтинг:
18

F-ES Sitecore 

<form id="form1" runat="server">
    <div>
    <asp:ListBox runat="server" ID="MultiSelect" AutoPostBack="false" SelectionMode="multiple" OnSelectedIndexChanged="MultiSelect_SelectedIndexChanged">
    </asp:ListBox>   
                            
    </div>
    <div>
        <p>The Selected Value is:</p><asp:TextBox  ID="listBoxValue" runat="server" />
    </div>
</form>
    
<script>
    $(document).ready(function () {
        var select = $("#<%=MultiSelect.ClientID %>");
        var txt = $("#<%=listBoxValue.ClientID %>");

        select.change(function (e) {
            var result = "";
            var options = select.children("option:selected");
            $.each(options, function (i, el) {
                result += $(el).text();
                if (i < options.length - 1) {
                    result += ", ";
                }
            });
               
            txt.val(result);
        });
    });
</script>

1Future

привет, спасибо за это .. он выбирает текст, но как мне выбрать значение, а не он текст?

F-ES Sitecore

используйте "val" вместо текста

результат += $(el).val();

Рейтинг:
0

Karthik_Mahalingam 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   
    <script>

        $(function () {
            $('#MultiSelect').on('change', function (a, b, c) {
                var options = a.target.selectedOptions;  // get the selected items
                var temp = []; // temp array to store the selected ids
                for (var i = 0; i < options.length; i++) {
                    var item = options[i]; 
                    var value = item.value;  // id
                    var text = item.text;  // text 
                    temp.push(value);  // add the id to the array

                }
                var selectedValuesCSV = temp.join(','); // all selected values (ID)
                $('#listBoxValue').val(selectedValuesCSV)  // set it to the textbox
            });
        });
    </script>
</head>
<body>
  <form id="form1" runat="server">
    <div>
    <asp:ListBox runat="server" ID="MultiSelect" AutoPostBack="false"  SelectionMode="multiple" ></asp:ListBox>
                               
                            
    </div>
        <div>
            <p>The Selected Value is:</p><asp:TextBox  ID="listBoxValue" runat="server" ></asp:TextBox>
        </div>
    </form>
</body>
</html>

Sinisa Hajnal

Этот вариант не сработает, потому что ID будет искажен сервером.

Karthik_Mahalingam

Да, правильно.
Обратитесь к решению 1 для получения идентификатора клиента.