2013-11-01 3 views
3

У меня есть 2 разных варианта выбора в форме.Раскрывающееся окно зависит от опции, выбранной в другом раскрывающемся списке

Первый источник, второй - статус. Я хотел бы иметь разные ВАРИАНТЫ в раскрывающемся списке «Статус» в зависимости от параметра OPTION, выбранного в раскрывающемся списке «Источник».

Источник:

<select id="source" name="source"> 
    <option>MANUAL</option> 
    <option>ONLINE</option> 
</select> 

Статус:

<select id="status" name="status"> 

</select> 

Варианты: - Если источник является MANUAL, то положение открыто или ПЕРЕДАНА - Если источник находится в сети, то положение открыто или DELIVERED или SHIPPED

Неработающая попытка:

  <script> 
      $(document).ready(function() { 
      var option = document.getElementById("status").options; 
      if (document.getElementById('source').value == "MANUAL") { 
       $("#status").append('<option>OPEN</option>'); 
       $("#status").append('<option>DELIVERED</option>'); 
       } 
      if (document.getElementById('source').value == "ONLINE") { 
       $("#status").append('<option>OPEN</option>'); 
       $("#status").append('<option>DELIVERED</option>'); 
       $("#status").append('<option>SHIPPED</option>'); 
       } 
      }); 
      </script> 
+5

** Вопросы просящих кода должны показывать минимальный понимание проблемы. Включите попытки решения, почему они не работают и ожидаемые результаты. ** –

+0

Надеюсь, это поможет. http://stackoverflow.com/questions/6573487/jquery-validation-select-required-if-checkbox-checked – usernolongerregistered

+0

Извините, добавлена ​​моя попытка javascript – samyb8

ответ

4

попробовать что-то вроде этого ... jsfiddle demo

HTML

Source: <select id="source" name="source"> 
    <option>MANUAL</option> 
    <option>ONLINE</option> </select> 

Status: 

<select id="status" name="status"> 
    <option>OPEN</option> 
     <option>DELIVERED</option> 
    </select> 

JS

$(document).ready(function() { 

    $("#source").change(function() { 

    var el = $(this) ; 

    if(el.val() === "ONLINE") { 
    $("#status").append("<option>SHIPPED</option>"); 
    } 
     else if(el.val() === "MANUAL") { 
     $("#status option:last-child").remove() ; } 
    }); 

}); 
0

Вам лучше сделать два selects и показ одного, спрятав другого.

Это проще, и добавление options в selects с помощью вашего метода не будет работать в IE8 (если вам интересно).

1

В this jsfiddle вы найдете решение, которое я deviced. Идея состоит в том, чтобы иметь селекторную пару в html и использовать (простой) javascript для фильтрации опций в зависимом селекторе на основе выбранного варианта первого. Например:

<select id="continents"> 
<option value = 0>All</option> 
<option value = 1>Asia</option> 
<option value = 2>Europe</option> 
<option value = 3>Africa</option> 
</select> 
<select id="selectcountries"></select> 

Uses (в jsFiddle)

MAIN.createRelatedSelector 
    (document.querySelector('#continents')   // from select element 
     ,document.querySelector('#selectcountries')  // to select element 
     ,{            // values object 
     Asia: ['China','Japan','North Korea', 
       'South Korea','India','Malaysia', 
       'Uzbekistan'], 
     Europe: ['France','Belgium','Spain','Netherlands','Sweden','Germany'], 
     Africa: ['Mali','Namibia','Botswana','Zimbabwe','Burkina Faso','Burundi'] 
     } 
     ,function(a,b){return a>b ? 1 : a<b ? -1 : 0;} // sort method 
); 
+0

Почти то, что я хочу, но как добавить '' под selectcountries? – Elyor

+0

Проверьте эту вилку оригинала jsfiddle: http://jsfiddle.net/KooiInc/6w51b6uv/ – KooiInc

1
function dropdownlist(listindex) 
    { 
     document.getElementById("ddlCity").options.length = 0; 
     switch (listindex) 
     { 
      case "Karnataka": 
        document.getElementById("ddlCity").options[0] = new Option("--select--", ""); 
        document.getElementById("ddlCity").options[1] = new Option("Dharawad", "Dharawad"); 
        document.getElementById("ddlCity").options[2] = new Option("Haveri", "Haveri"); 
        document.getElementById("ddlCity").options[3] = new Option("Belgum", "Belgum"); 
        document.getElementById("ddlCity").options[4] = new Option("Bijapur", "Bijapur"); 

       break; 

      case "Tamilnadu": 
       document.getElementById("ddlCity").options[0] = new Option("--select--", ""); 
       document.getElementById("ddlCity").options[1] = new Option("dgdf", "dgdf"); 
       document.getElementById("ddlCity").options[2] = new Option("gffd", "gffd"); 


       break; 
     } 

    } 

* Состояние: --Выбор-- Карнатака Тамилнад Андра прадеш Telngana

<div> 
     <p> 

      <label id="lblCt"> 
      <span class="red">*</span> 
       City:</label> 
      <select id="ddlCity"> 
       <!-- <option>--Select--</option> 
       <option value="1">Dharawad</option> 
       <option value="2">Belgum</option> 
       <option value="3">Bagalkot</option> 
       <option value="4">Haveri</option> 
       <option>Hydrabadh</option> 
       <option>Vijat vada</option>--> 
      </select> 
      <label id="lblCity"></label> 
     </p> 
    </div> 
+0

, пожалуйста, дайте некоторые детали –

2

Я отправляю этот ответ, потому что в этом случае вы никогда не будет нуждаться в какой-либо плагин, как JQuery и любой другой, Это имеет решение, простой JavaScript.

<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <script language="javascript" type="text/javascript"> 
    function dynamicdropdown(listindex) 
    { 
     switch (listindex) 
     { 
     case "manual" : 
      document.getElementById("status").options[0]=new Option("Select status",""); 
      document.getElementById("status").options[1]=new Option("OPEN","open"); 
      document.getElementById("status").options[2]=new Option("DELIVERED","delivered"); 
      break; 
     case "online" : 
      document.getElementById("status").options[0]=new Option("Select status",""); 
      document.getElementById("status").options[1]=new Option("OPEN","open"); 
      document.getElementById("status").options[2]=new Option("DELIVERED","delivered"); 
      document.getElementById("status").options[3]=new Option("SHIPPED","shipped"); 
      break; 
     } 
     return true; 
    } 
    </script> 
    </head> 
    <title>Dynamic Drop Down List</title> 
    <body> 
    <div class="category_div" id="category_div">Source: 
     <select id="source" name="source" onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);"> 
     <option value="">Select source</option> 
     <option value="manual">MANUAL</option> 
     <option value="online">ONLINE</option> 
     </select> 
    </div> 
    <div class="sub_category_div" id="sub_category_div">Status: 
     <script type="text/javascript" language="JavaScript"> 
     document.write('<select name="status" id="status"><option value="">Select status</option></select>') 
     </script> 
     <noscript> 
     <select id="status" name="status"> 
      <option value="open">OPEN</option> 
      <option value="delivered">DELIVERED</option> 
     </select> 
     </noscript> 
    </div> 
    </body> 
</html> 

Для получения более подробной информации, я имею в виду, чтобы сделать динамичнее и зависимость, пожалуйста, посмотрите на эту ссылку create dynamic drop-down list

0

Я надеюсь, что следующий код поможет или решить вашу проблему или вы не думаете, что понятно визит http://phppot.com/jquery/jquery-dependent-dropdown-list-countries-and-states/ ,

HTML DYNAMIC DEPENDENT ВЫБОР

<div class="frmDronpDown"> 
<div class="row"> 
    <label>Country:</label><br/> 
    <select name="country" id="country-list" class="demoInputBox" onChange="getState(this.value);"> 
    <option value="">Select Country</option> 
    <?php 
    foreach($results as $country) { 
    ?> 
    <option value="<?php echo $country["id"]; ?>"><?php echo $country["name"]; ?></option> 
    <?php 
    } 
    ?> 
    </select> 
</div> 
<div class="row"> 
    <label>State:</label><br/> 
    <select name="state" id="state-list" class="demoInputBox"> 
    <option value="">Select State</option> 
    </select> 
</div> 

ПОЛУЧЕНИЕ ШТАТЫ VIA AJAX

<script> function getState(val) { $.ajax({ 
type: "POST", 
url: "get_state.php", 
data:'country_id='+val, 
success: function(data){ 
    $("#state-list").html(data); 
} 
});} </script> 

READ ГОСУДАРСТВЕННАЯ БАЗА ДАННЫХ С ПОМОЩЬЮ PHP

<?php require_once("dbcontroller.php"); $db_handle = new DBController();if(!empty($_POST["country_id"])) { 
$query ="SELECT * FROM states WHERE countryID = '" . $_POST["country_id"] . "'"; 
$results = $db_handle->runQuery($query); ?> <option value="">Select State</option><?php foreach($results as $state) { ?> <option value="<?php echo $state["id"]; ?>"><?php echo $state["name"]; ?></option><?php } } ?> 
Смежные вопросы