Aşağıdaki senaryoda gösterildiği gibi aşağı açılan kutular var. JQuery/Javascript kullanarak sonuca nasıl ulaşılacağını öneren herhangi biri olabilir mi?JQuery'e bağlı aşağı açılan kutular doldurulur - nasıl

Senaryo:

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>

Düzenleme: öğeleri (döngü için) javascript aracılığıyla doldurulur ediliyor seçeneği söylemeyi unutmuşum üzgünüm. HH1 seçilen değere dayanarak HH2 dinamiğini nasıl yapacağımı bilmem gerek.

kullanıcı ben hh2 içinde sadece 3-0 (0 24 saat olduğu) seçeneğini seçenekleri göstermek istiyorum seçeneği HH1 (Saat) 'de 3 seçerse. 1-2 görmek istemiyorum.

Temel olarak HH2, HH1 —'da seçilen değere bağlıdır, bu JavaScript'te kullanılabilir mi? Mümkünse bana nasıl olduğunu gösterir misiniz?

kaynak

2011-05-06 Nil Pun

ne olduğunu bağımlılık 'HH1> HH2'? –

Maalesef HH1'de HH2 Options> = SELECTED değeri var. –

yazım hatası: ikinci 'select''in adı muhtemelen 'drop2' nedir? –

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/

kaynak

2011-05-06 11:18:26

@theSuperTramp, teşekkürler. Neredeyse, bu satır için NAN alıyorum: var drop1selected = parseInt ($ (this) .find (": selected")); uyarısı (drop1selected); –

Kodu değiştirdim .. yerine 'this.value' kullanın. –

Teşekkür ederiz @theSuperTramp, siz çok idiniz! –

Kısa cevap Evet, JavaScript/Jquery'de mümkündür.

Sen veriye * bağlıyor Yepyeni HTML5 bu tanımlayan senin bağımlılıkları gibi yapabileceğini :-) böyle

HTML: Böyle

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>

Ve JavaScript (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');

Bu, düşüşlerinizde ne yapmak istediğinizi yapmalıdır. Eğer yorumunda koymak koşulu ile

biraz daha kolaydır:

$('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');

kaynak

2011-05-06 10:59:58 Guidhouse

Teşekkürler @Guidhouse, bağımlılık HH2 Seçenekler> = SEÇİLEN değer HH1 örn. 2 seçildiğinde sadece 2 veya daha büyük gösterilir. –

Teşekkür ederiz @Guidhouse. Harika bir cevap. –

/Bu JavaScript kod/

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>

kaynak

2014-12-04 04:16:08 chetan

JQuery'e bağlı aşağı açılan kutular doldurulur - nasıl

cevap

http://jsfiddle.net/HTEkw/

İlgili konular