За последние 24 часа нас посетили 6747 программистов и 659 роботов. Сейчас ищут 76 программистов ...

Получить значение option из datalist

Тема в разделе "JavaScript и AJAX", создана пользователем shtrih, 4 дек 2019.

  1. shtrih

    shtrih Активный пользователь

    С нами с:
    10 дек 2015
    Сообщения:
    52
    Симпатии:
    3
    Добрый вечер.

    Требуется получить значение option из datalist, которое выбирает пользователь. Перепробовал несколько примеров в интернете и ничего не получаете. Можете подсказать вариант решение?

    Требуется, чтобы при выборе из одного списка datalist, аякс менял список во втором datalist.

    Но для начала просто получить значение из datalist

    Код (Javascript):
    1. <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3.org/TR/html4/loose.dtd'>
    2. <html>
    3. <head>
    4.  
    5.  
    6.     <title>1111</title>
    7.     <link rel='stylesheet' type='text/css' href='../style.css'>
    8.     <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    9.  
    10.     <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
    11.     <script type='text/javascript'>
    12.  
    13.         $(function () {
    14.             $('#browserinput').on('input', function () {
    15.                 var opt = $('option[value="' + $(this).val() + '"]');
    16.                 alert(opt.length ? opt.attr('id') : 'NO OPTION');
    17.             });
    18.         });
    19.  
    20.         $(document).on('change', '#idcompany2', function (event) {
    21.             // var sel = document.getElementById('#idcompany1');
    22.             //var val = sel.options[sel.selectedIndex].value;
    23.             var value = $('#idcompany2 option:selected').text();
    24.             alert('|' + value + '|');
    25.  
    26.         })
    27.  
    28.  
    29.     </script>
    30. </head>
    31. <body>
    32. <br><br>
    33.  
    34. <input name="company" id="idcompany1" list="character1"></div>
    35. <datalist id="character1">
    36.     <option id="op1" value="1">
    37.     <option id="op2" value="2">
    38.     <option id="op3" value="3">
    39. </datalist>
    40.  
    41. <input id='browserinput' list="browsers">
    42.  
    43. <datalist id="browsers">
    44.     <option id="op1" value="Internet Explorer"/>
    45.     <option id="op2" value="Firefox"/>
    46.     <option id="op3" value="Chrome"/>
    47.     <option id="op4" value="Opera"/>
    48.     <option id="op5" value="Safari"/>
    49. </datalist>
    50. <script>
    51.     document.getElementById("idcompany1").oninput = function () {
    52.         // alert("111");
    53.         var inp = this.value;
    54.  
    55.         var opt = document.querySelector("#character1 option[value='" + inp + "']");
    56.  
    57.         if (opt) alert(opt.dataset.value);
    58.  
    59.         $('#character1 option').each(function () {
    60.             if ($(this).is(':selected')) {
    61.                 // Your code here with the selected value
    62.                 alert("111");
    63.             }
    64.         });
    65.  
    66.     }
    67.  
    68.  
    69.     $(function () {
    70.         $('#idcompany1').on('input', function () {
    71.             var opt = $('option[value="' + $(this).val() + '"]');
    72.             alert(opt.length ? opt.attr('id') : 'NO OPTION');
    73.  
    74.         });
    75.     });
    76. </script>
    77.  
    78. </body>
    79. </html>
     
  2. shtrih

    shtrih Активный пользователь

    С нами с:
    10 дек 2015
    Сообщения:
    52
    Симпатии:
    3

    Вопрос пока решён. Прописал id у option, который равное value. И их получаю