Блог

Главная - Вопросы по программированию - Как изменить выпадающий список на текстовое поле и наоборот на основе другого выпадающего списка

Как изменить выпадающий список на текстовое поле и наоборот на основе другого выпадающего списка

#php #javascript #jquery

#php #javascript #jquery

Вопрос:

Я разрабатываю приложение, в котором я использую country (выпадающий список) и state (выпадающий список).

Вопрос в том, когда 1 Выберите country это государства будет заполнен в state dropdownlist для, НО Государственный список предоставляется только для США и другие страны не предоставляются, поэтому им приходится вводить.

Итак, как изменить state тип ввода (ТЕКСТОВОЕ ПОЛЕ ИЛИ ВЫПАДАЮЩИЙ СПИСОК) на основе USA ( country ). Это 

 If USA -DROPDOWNLIST Else Other Countries -TEXTBOX

Ответ №1:

Я бы сделал это поле выбора по умолчанию, а затем использовал этот jQuery, чтобы изменить его.

 if($(#country_select).val() != 'USA'){
  $('#selectbox').attr('type', 'textbox');
  $('#selectbox option').remove();
}

ПРИМЕЧАНИЕ

Это очень простое решение, и для него требуется, чтобы значением по умолчанию было USA. Я думаю, что там достаточно информации для создания более надежного решения.

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

1. Если вы хотите, чтобы ваше решение красиво ухудшалось, вы должны полагаться на минимальные требования (текстовое поле, доступное для всех) и настроить его с помощью javascript, чтобы получить выпадающее меню

2. Вы, вероятно, правы (нет, вы определенно правы), но я думал, что приведенного выше сценария было достаточно, чтобы указать кому-то правильное направление, отсюда и примечание.

Ответ №2:

Привет, В выпадающем списке country прикрепите событие onchange и переключите выбранное значение, если это одна из стран, в которой нет города, скройте выпадающий список и покажите текстовое поле, и наоборот.

 <select id="country" onchange="check(this)">
  <option value="Select">Select</option>
  <option value="USA">USA</option>
  <option value="EG">EG</option>    
</select>

<select id="s_city">
</select>

<input type="text" id="t_city" style="display:none;">

Скрипт

 function check(s)
{
    document.getElementById('t_city').value ='';
    document.getElementById('s_city').innerHTML='';


   var c= s.options[s.selectedIndex].value;
   //Here You Can Start Loading your states with each country
   if(c !="USA")
   {
    document.getElementById('t_city').style.display='block';
    document.getElementById('s_city').style.display='none';
   }
  else
   {
    document.getElementById('t_city').style.display='none';
    document.getElementById('s_city').style.display='block';
   }
}

Я бы хотел, чтобы этот пример помог

Ответ №3:

У меня был бы выпадающий список штатов и текстовое поле для других стран.

HTML

 <select id="cboCountry">
    <!-- <option value="USA">USA</option> -->
    <!-- etc -->
</select>
<select id="cboState">
    <!-- <option value="Alabama">Alabama</option> -->
    <!-- etc -->
</select>
<input type="text" id="txtState" style="display:none;" />

Javascript

 $('#cboCountry').change(
    if($('#cboCountry').value() != 'USA'){
        $('#txtState').show();
        $('#cboState').hide();
    }
    else
    {
        $('#txtState').hide();
        $('#cboState').show();
    }
);

Ответ №4:

Идея здесь в том, что вам понадобится выпадающий список для состояния, а также текстовое поле. Если вы предпочитаете сначала отобразить выпадающий список, не отображайте текстовое поле или измените его.

Хотя мое решение очень похоже на Marvan, просто взгляните на живой пример здесь

для другой ссылки. Если вы собираетесь отправить это вместе с формой you, я думаю, имя должно быть таким же.

Ответ №5:

Используя метод DOM / Inner HTML, вы можете достичь этого.

Метод innerHTML без jQuery

 <select id='country_select'>
<div id='container'>
<input ...>
</div>

if (document.getElementById ("country_select").value != "USA")
{
document.getElementById("container").innerHTML = "<input ...>";
}
else
document.getElementById("container").innerHTML = "<select ...>";