Блог

В моем html-шаблоне у меня есть набор параметров в <select> теге. Одна конкретная опция позволяет ввести пользовательское название категории в поле ввода текста.

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

Вот HTML- <select> и <input> поля (ы):

  {% for index in list %}

   <select name="browser" id="select_id{{index}}" onchange="if(this.options[this.selectedIndex].value=='customOption'){toggleField(this,this.nextSibling); this.selectedIndex='0';}">

     <option value="0">---- select ----</option>
     <option value="customOption">[enter your own custom category]</option>
     <option value="Chrome">Chrome</option>
     <option value="Firefox">Firefox</option>
     <option value="Internet Explorer">Internet Explorer</option>

     <input name="browser" id="input_id{{index}}" type="text" disabled="disabled" onblur="if(this.value==''){toggleField(this,this.previousSibling);}">

    </select>

    <!-- SUBMIT BUTTON TO INVOKE add_category() javascript method -->

    <button type="button" onclick="add_category('select_id{{index}}', 'input_id{{index}}');">SUBMIT</button>

 {% endfor %}                                   
  

В add_category() я просто хочу отобразить выбранное / введенное значение категории в виде предупреждающего сообщения на экране.

 function add_category(select_id, input_id){
        if($("#" select_id).val()=='0')
        {
            alert("Please select a valid category");
        }
        else if($("#" select_id).val()=='customOption')
        {
            var i = $("#" input_id).val();
            alert("INPUT CATEGORY: ", i);
        }
        else
        {
            var s = $("#" select_id).val();
            alert("SELECTED CATEGORY: ", s);        
        }
    }
  

Однако во введенном или выбранном значении категории значение не возвращается.

Вы можете получить значение выбора, используя приведенный ниже фрагмент, это помогло бы вам.

 var mySelect = $('select[name=browser');
var conceptName = mySelect.find(":selected").text();
console.log(conceptName)
  

Фрагмент исполняемого файла находится в приведенном ниже URL code Pen
https://codepen.io/redhatvicky/pen/RdzEGW

 function add_category(select_id, input_id){
        if($("#" select_id "").val()=='0')
        {
            alert("Please select a valid category");
        }
        else if($("#" select_id "").val()=='customOption')
        {
            var i = $("#" input_id "").val();
            alert("INPUT CATEGORY: ," i);
        }
        else
        {
            var s = $("#" select_id "").val();
            alert("SELECTED CATEGORY: ,"  s);        
        }
    }



    });
  

Это даже недопустимый html, Chrome отображает входные данные за пределами выбора.

Поместите входные данные за пределы выбора.

 <select>
  <option>Select</option>
  <input type="text">
</select>  

ввод внутри select не является допустимым html, как сказал Андриан. Вы должны создать пользовательский выпадающий список с вводом внутри, используя не выбор по умолчанию, а элемент, такой как ul, li, например.