Javascript в HTML-форме

Привет Я пытаюсь реализовать HTML-форму. Предположим, у него есть 4 поля - имя, возраст, город (выпадающий список - содержит A, B, C, D) и регион. Я хочу, чтобы поле области появлялось только тогда, когда выбрано City A или B и исчезает, если город изменен на C и D. Может ли кто-нибудь помочь с кодом JS/JQuery?Javascript в HTML-форме

JsFiddle:

<!DOCTYPE HTML> 
 
<html> 
 
    <head> 
 
    <title>BEAT | Login</title> 
 
    <link rel="shortcut icon" href="images/favi.ico"> 
 
    </head> 
 

 
    <body> 
 
     <div id="login"> 
 
      <form> 
 
       Name: <input type="text"></input> 
 
       <br/> 
 

 
       Age: <input type="text"></input> 
 
       <br/> 
 
       State: <select> 
 
          <option value="A">A</option> 
 
          <option value="B">B</option> 
 
          <option value="C">C</option> 
 
          <option value="D">D</option> 
 
         </select> 
 
         <br/> 
 
       Region: <select> 
 
          <option value="north">North</option> 
 
          <option value="south">South</option> 
 
         </select> 
 
      </form> 
 
     </div> 
 
    </body> 
 
</html>

источник

2015-06-23 Raghav Motwani

Как насчет исследования для более общих тем? http://stackoverflow.com/questions/24579361/chained-select-boxes-country-state-city. Кроме того, вот некоторые интересные чтения: http://meta.stackexchange.com/questions/19665/the-help-vampire-problem – theMarceloR

Возможно, вы могли бы нанять кого-то, чтобы выполнить вашу работу! : P вы бы задали несколько общих вопросов, а не собирались! – Navaneeth

Вы должны были пометить вопрос для jquery и указать, что вы можете его использовать, поскольку вы отметили его только для javascript, мне пришлось закодировать ответ в чистом javascript. –

Updated Fiddle ...

$('#region').css('display','none'); 
$('#state').on('change', function() { 
    var state= $('#state').val(); 
    if(state=="A"||state=="B"){ 
     $('#region').css('display','block'); 
    }else{ 
     $('#region').css('display','none'); 
    } 
});

Попробуйте это ..

источник

2015-06-23 10:20:26

Поскольку вы не помечать его для JQuery, так что использование чистый javascript, который вам нужно Дата следующего:

В HTML:

<!DOCTYPE HTML> 
<html> 
<head> 
<title>BEAT | Login</title> 
<link rel="shortcut icon" href="images/favi.ico"> 
</head> 

<body> 
    <div id="login"> 
     <form> 
      Name: <input type="text"></input> 
      <br/> 

      Age: <input type="text"></input> 
      <br/> 
      State: <select id="state"> 
         <option value="A">A</option> 
         <option value="B">B</option> 
         <option value="C">C</option> 
         <option value="D">D</option> 
        </select> 
        <br/> 
      <div id="region"> 
       Region: <select> 
         <option value="north">North</option> 
         <option value="south">South</option> 
       </select> 
      </div> 
     </form> 
    </div> 
</body>

Здесь я добавил идентификаторы для region и state полей.

Обновленный JavaScript для:

var state = document.getElementById("state"); 
state.addEventListener("change",function(){ 
var selected = state.options[state.selectedIndex].text; 
    if(selected == 'A' || selected == 'B'){ 
     document.getElementById('region').style.display = 'block';  
    } 
    else{ 
     document.getElementById('region').style.display = 'none'; 
    } 
});

Здесь state элемент, связанный с change событием. При каждом изменении в списке выбора выбранное значение сравнивается с «A» и «B». Если найдено равным, отображается поле Region, иначе оно скрыто.

Смотрите обновленный скрипку: "http://jsfiddle.net/4v5mkfz9/6/"

источник

2015-06-23 10:27:23

использование в Java Script

$('#regionArea').hide(); 
$('#state').on('change', function() { 
    var state= $('#state').val(); 
    if(state=="A"||state=="B"){ 
     $('#regionArea').show(); 
    }else{ 
     $('#regionArea').hide(); 
    } 
});

<div id="login"> 
     <form> 
      Name: <input type="text"></input> 
      <br/> 

      Age: <input type="text"></input> 
      <br/> 
      State: <select id="state"> 
         <option value="A">A</option> 
         <option value="B">B</option> 
         <option value="C">C</option> 
         <option value="D">D</option> 
        </select> 
        <br/><div id="regionArea"> 
      Region: <select id="region"> 
         <option value="north">North</option> 
         <option value="south">South</option> 
      </select></div> 
     </form> 
    </div>

updated fiddle

источник

2015-06-23 10:38:32

<html> 
<head> 
<title>BEAT | Login</title> 
<link rel="shortcut icon" href="images/favi.ico"> 
</head> 

<body> 
    <div id="login"> 
     <form> 
      Name: <input type="text"></input> 
      <br/> 

      Age: <input type="text"></input> 
      <br/> 
      State: <select id="state"> 
         <option value="A">A</option> 
         <option value="B">B</option> 
         <option value="C">C</option> 
         <option value="D">D</option> 
        </select> 
        <br/> 
      Region: <select id="Direction"> 
         <option value="north">North</option> 
         <option value="south">South</option> 
        </select> 
     </form> 
    </div> 
</body>

<script type="text/javascript"> 

document.getElementById("state").addEventListener("change", CheckChange); 

function CheckChange() { 
var state = document.getElementById("state"); 
var selectedValue = state.options[state.selectedIndex].value; 
if(selectedValue == 'A' || selectedValue == 'B') 
    { 
    document.getElementById("Direction").style.visibility = "hidden"; 
    } 
else 
{ 
    document.getElementById("Direction").style.visibility = "visible"; 
    } 
} 
</script>

вы также можете использовать "document.getElementById (" Направление "). Style.display" Чтобы установить свойство стиля ...

источник

2015-06-23 11:28:31

Javascript в HTML-форме

ответ

Смежные вопросы