Блог

Главная - Вопросы по программированию - Получение выбранных элементов в виде массива значений

Получение выбранных элементов в виде массива значений

#javascript

#javascript

Вопрос:

У меня есть приведенный ниже код, который имеет multiselect выпадающий список:

 <html>
    <head><title>Hello</title>
        <link rel="stylesheet" type="text/css" href="/static/Semantic-UI-CSS-master/semantic.min.css">
        <script src="/static/jquery-3.5.1.min.js"></script>
        <script src="/static/Semantic-UI-CSS-master/semantic.min.js"></script>
    </head>
    <body>
        <h1>Hello, world!</h1>
        <select name="skills" id="skills-select" multiple="" class="ui fluid dropdown">
            <option value="">Skills</option>
            <option value="angular">Angular</option>
            <option value="css">CSS</option>
            <option value="design">Graphic Design</option>
        </select>
    <script>
            $('#skills-select').dropdown();
        </script>

    <button class="ui button" id="go">
      <i class="play icon"></i>
    </button>

    <script>
      $("#go" ).click(function() {
        var x = $('#skills-select :selected').text();
        console.log(x)
      });
    </script>

        </body>
</html>

Как я считываю значения selected параметров в выпадающем списке в виде массива.
Например, если я выбрал оба css и angular из приведенного выше списка, я хочу иметь вывод в:
x = ["css", "angular"]

Комментарии:

1. Какие исследования вы провели по этой проблеме и какие попытки вы предприняли на основе этого исследования?

2. Это должно сработать….

Ответ №1:

Так просто в чистом JS:

 const getVals      = document.getElementById('get-values')
  ,   skillsSelect = document.getElementById('skills-select')
  ;
getVals.onclick =_=>
  {
  let choosed = [...skillsSelect.selectedOptions].map(e=>e.value)
  console.clear()
  console.log( choosed )
  }  
 <select id="skills-select" multiple >
  <option value="one"     >Skills        </option>
  <option value="angular" >Angular       </option>
  <option value="css"     >CSS           </option>
  <option value="design"  >Graphic Design</option>
</select>

<button id="get-values">getVals </button>

Комментарии:

1. Спасибо, что эквивалентно чистому JS $('#skills-select').dropdown();

2. @HasanAYousef много кода. почему этот вопрос? единственный тег, который вы упоминаете, — это javascript, и никакой другой!

3. Поскольку вы предложили использовать чистый JS-код в качестве ответа, единственным оставшимся jQuery в моем коде является тот, который я показал, поэтому я решил сделать весь мой код чистым JSconly.

4. @HasanAYousef хорошо, но .dropDown() в jQuery нет метода…

5. Он блокирует то, что было добавлено semantic фреймворком, я заменил его на document.querySelector('#get-values').dropdown();

Ответ №2:

Используйте val() метод jQuery вместо получения text() и используйте $('#skills-select') вместо $('#skills-select :selected') .

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
    <head><title>Hello</title>
        <link rel="stylesheet" type="text/css" href="/static/Semantic-UI-CSS-master/semantic.min.css">
        <script src="/static/jquery-3.5.1.min.js"></script>
        <script src="/static/Semantic-UI-CSS-master/semantic.min.js"></script>
    </head>
    <body>
        <h1>Hello, world!</h1>
        <select name="skills" id="skills-select" multiple="" class="ui fluid dropdown">
            <option value="">Skills</option>
            <option value="angular">Angular</option>
            <option value="css">CSS</option>
            <option value="design">Graphic Design</option>
        </select>

    <button class="ui button" id="go">
      <i class="play icon"></i>
    </button>

    <script>
      $("#go" ).click(function() {
        var x = $('#skills-select').val();
        console.log(x)
      });
    </script>

        </body>
</html>