아래 시나리오와 같이 종속 드롭 다운 상자가 있습니다. 누구든지 JQuery/Javascript를 사용하여 결과를 얻는 방법을 제안 할 수 있습니까?Jquery 종속 드롭 다운 상자 채우기 - 방법

시나리오 :

이

HH1: 
    <select name="drop1"> 
     <option value="0"> 
     <option value="2"> 
     <option value="3"> 
     ...... 
     <option value="23"> 
    </select> 

HH2: 
    <select name="drop1"> 
     <option value="0"> 
     <option value="2"> 
     <option value="3"> 
     ...... 
     <option value="23"> 
    </select>

편집 : 항목 (루프) 자바 스크립트를 통해 채워되고있는 옵션을 얘기를 깜빡 했네요 죄송합니다. HH1 selected value를 기반으로 HH2를 동적으로 만드는 방법을 알아야합니다.

사용자가 옵션 HH1 (시간)에서 3을 선택한 경우 만 3-0 (0은 24 시간) 만 표시하려면 HH2에서 옵션을 선택하십시오. 나는 1-2를보고 싶지 않다.

기본적으로 HH2는 HH1에서 선택된 값에 따라 달라집니다. — JavaScript로 가능할까요? 가능한 경우 어떻게 보여 주시겠습니까?

출처

2011-05-06 Nil Pun

무엇인지는이다 의존성'HH1> HH2'? –

죄송합니다. depression은 HH2 Options> = HH1의 SELECTED 값입니다. –

typo : 두 번째'select'의 이름은 아마도'drop2'입니까? –

var drop2 = $("select[name=drop2] option"); // the collection of initial options 
$("select[name=drop1]").change(function(){ 
    var drop1selected = parseInt(this.value); //get drop1 's selected value 
    $("select[name=drop2]") 
        .html(drop2) //reset dropdown list 
        .find('option').filter(function(){ 
         return parseInt(this.value) < drop1selected; //get all option with value < drop1's selected value 
         }).remove(); // remove 
});

http://jsfiddle.net/HTEkw/

출처

2011-05-06 11:18:26

@ theSuperTramp, 감사합니다. 거의, 나는이 줄에 대해 NAN을 얻고있다. var drop1selected = parseInt ($ (this) .find (": selected"))); 알림 (drop1selected); –

나는 코드를 변경했다. 대신'this.value'를 사용한다. –

@ theSuperTramp, 고맙습니다! –

짧은 대답은 예입니다. JavaScript/Jquery에서는 가능합니다.

당신은 데이터 - * 속성 새로운 HTML5에서이 정의 의존성처럼 할 수 :-)이 같은

HTML :이 같은

HH1: 
<select name="drop1"> 
    <option value="0" data-shown="0,2">00</option> 
    <option value="2" data-shown="2,3">02</option> 
    <option value="3" data-shown="3,23">03</option> 
    <option value="23" data-shown="23,0">23</option> 
</select> 

HH2: 
<select name="drop2"> 
    <option value="0">00</option> 
    <option value="2">02</option> 
    <option value="3">03</option> 
    <option value="23">23</option> 
</select>

그리고 자바 스크립트 (JQuery와)

$('select[name="drop1"]').change(function() { 
var ar = $('select[name="drop1"] option:selected').attr('data-shown').split(','); 
$('select[name="drop2"] option').each(function(){ 
    $(this).toggle(false); 
    for(var i = 0; i <= ar.length; i++){ 
     if($(this).attr('value') == ar[i]){ 
     $(this).toggle(true); 
     } 
    } 
});}).trigger('change');

드롭 다운에서 원하는 작업을 수행해야합니다. 당신은 코멘트에 넣어 조건으로

그것은 조금 더 쉽게 :

$('select[name="drop1"]').change(function() { 
    var number = parseInt($('option:selected', this).attr('value')); 
    $('select[name="drop2"] option').each(function(){ 
      $(this).toggle(parseInt($(this).attr('value')) >= number); 
     }); 
}).trigger('change');

출처

2011-05-06 10:59:58 Guidhouse

감사합니다. @Guidhouse, 종속성은 HH2입니다. Options> = HH1의 SELECTED 값 예. 2를 선택하면 2 이상 만 표시됩니다. –

@Guidhouse 감사합니다. 훌륭한 대답입니다. –

/이 자바 스크립트 코드/

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

      case "Tamilnadu": 
       $("#ddlCity").options[0] = new Option("--select--", ""); 
       $("#ddlCity").options[1] = new Option("Chennai", "Chennai"); 
       $("#ddlCity").options[2] = new Option("Vijayada", "Vijayada"); 
       break; 
     } 
    } 
    </script> 



<body> 
     <div> 
      <p> 
       <label id="lblCt"> 
        City:</label> 
       <select id="ddlCity" style="width: 142px;"> 
        <option>--Select--</option> 
       </select> 
       <span class="red">*</span> 
       <label id="lblCity" style="color:Red; font-size:small;"> 
       </label> 
      </p> 
     </div> 
     <div> 
      <p> 
       <label> 
        Country:</label> 
       <input type="text" id="txtCountry" /> 
       <label id="lblCountry" style="color:Red; font-size:small;"> 
       </label> 
      </p> 
     </div> 
</body>

출처

2014-12-04 04:16:08 chetan

Jquery 종속 드롭 다운 상자 채우기 - 방법

답변

http://jsfiddle.net/HTEkw/

관련 문제