Drop-down-Wert hängt von radio-button-Auswahl

Habe ich zwei radio button mit name='bb', und ich habe drop-down-button mit name='size', dass müssen zwei unterschiedliche option hängt davon ab, aktiviert radio-button.

HTML:

Code below
----------------------------------------
<input type="radio" name="bb" id="bb" checked required="true" value="home" >
<div>Home</div>
<input type="radio" name="bb" id="bb" value="office">
<div>Office</div>

<label>Size</label>
<select name="bedroom" id="bedroom" style="color: #8E9092; /*height: 38px;width: 228px;*/" >

For Home---
<option value="1 Bedroom (350 to 700 sq ft)">1 Bedroom (350 to 700 sq ft)</option>
<option value="2 Bedroom (700 to 1300 sq ft)">2 Bedroom (700 to 1300 sq ft)</option>
<option value="3 Bedroom (1300 to 2000 sq ft)">3 Bedroom (1300 to 2000 sq ft)</option>
<option value="4 Bedroom (2000 to 3000+ sq ft)">4 Bedroom (2000 to 3000+ sq ft)</option>

For Office--
<option value="">Choose size</option>
<option value="Studio (400-600 sq ft)">Studio (400-600 sq ft)</option>
<option value="Studio Alcove (600-700 sq ft)">Studio Alcove (600-700 sq ft)</option>

  • Was ist Ihre Frage. Mehr dazu erklären, was passiert und was Sie wollen.
  • Haben Sie einen Blick auf obige Frage einmal, Wenn ich auf Home radio-button brauchen, um die Optionen auf dem Startbildschirm & gleichen für office auch.
  • Ok, das heißt, Sie müssen nur eine option angezeigt. home anderes Büro, Richtig?
InformationsquelleAutor Chetan | 2015-03-28
  1. 1

    Versuchen Sie Es: fügen Sie die jquery-Bibliothek zuerst.

    Demo

    html:

      <input type="radio" id="home" name="chk" value="1" checked>Home <br/>
  <input type="radio" id="office" name="chk" value="2" >Office<br/>
<br/>
  <select id="describe">
     <option name="name" value="1">Select from above</option>
  </select>

    Jquery:

    var listA = [{name:'1 Bedroom 350 to 700 sq ft', value:'1 Bedroom 350 to 700 sq ft'}, {name:'2 Bedroom 700 to 1300 sq ft', value:'2 Bedroom 700 to 1300 sq ft'}, {name:'3 Bedroom 1300 to 2000 sq ft', value:'3 Bedroom 1300 to 2000 sq ft'}];

var listB = [{name:'Studio 400-600 sq ft', value:'Studio 400-600 sq ft'}, {name:'Studio Alcove 600-700 sq ft', value:'Studio Alcove 600-700 sq ft'}];

$(document).ready( function() {
  $("input[name='chk']").on('change',function() {

      if($(this).is(':checked') && $(this).val() == '1')
      {
        $('#describe').empty()
        $.each(listA, function(index, value) {
         $('#describe').append('<option value="'+value.value+'">'+value.name+'</option>');
        });                  
      }
      else if($(this).is(':checked') && $(this).val() == '2')
      {
        $('#describe').empty()
        $.each(listB, function(index, value) {
         $('#describe').append('<option value="'+value.value+'">'+value.name+'</option>');
        }); 
      }
      else
      {

      }

  });
});
    • Danke koc, funktionieren..
    • Willkommen. Gerne unterstützen u.
    InformationsquelleAutor koc
  2. 1

    ****Dieser code, geben Sie den Wert je nach Auswahl des radio-button. ich erstellte dynamische drop-down, aber hier ist die statische Optionen, die ich erwähnt. hoffe das hilft ****

    JS:

    function yourfunction(radioid)
{
if(radioid == 1)
{    
   	document.getElementById('one').style.display = 'block';
    document.getElementById('two').style.display = 'none';
	document.getElementById('three').style.display = 'none';
 }
 else if(radioid == 2)
{  
	document.getElementById('three').style.display = 'none';
	document.getElementById('two').style.display = '';
    document.getElementById('one').style.display = 'none';
}
 else if(radioid == 3)
{  
	
	document.getElementById('three').style.display = '';
	document.getElementById('two').style.display = 'none';
    document.getElementById('one').style.display = 'none';
}
}

    HTML:

      
    <STRONG>Color</STRONG></br> <br>
    <INPUT TYPE='radio' NAME='grp2' VALUE='City0' onClick="javascript:return yourfunction(1)">Black
    <INPUT TYPE='radio' NAME='grp2' VALUE='City1' onClick="javascript:return yourfunction(2)">Red
    <INPUT TYPE='radio' NAME='grp2' VALUE='City2' onClick="javascript:return yourfunction(3)">Blue
<br/>

<div id = "one" style = "display:none"> <br/>

Black
<select name="school">
    <option name="black" value="b1">black1</option>
    <option name="black" value="b2">black2</option>
    <option name="black" value="b3">black3</option>
</select><br/>

</div><br/>


<div id = "two" style = "display:none">
Red
<select name="school">
<option name="black" value="r1">red1</option>
    <option name="black" value="r2">red2</option>
    <option name="black" value="r3">red3</option>

</select>
</div>
<div id = "three" style = "display:none">
Blue
<select name="school">
<option name="black" value="bl1">black1</option>
    <option name="black" value="bl2">black2</option>
    <option name="black" value="bl3">black3</option>

</select>
</div>

    InformationsquelleAutor Devsi Odedra
  3. 0

    Dynamisch laden und aktualisieren der Optionen wählen:

    <script type="text/javascript">
    var bedrooms = ['1 Bedroom (350 to 700 sq ft)','2 Bedroom (700 to 1300 sq ft)','3 Bedroom (1300 to 2000 sq ft)','4 Bedroom (2000 to 3000+ sq ft)'];
    var offices = ['Studio (400-600 sq ft)','Studio Alcove (600-700 sq ft)'];
    function setSelect(v) {
        var x = document.getElementById("bedroom");
        for (i = 0; i < x.length; ) { 
            x.remove(x.length -1);
        }
        var a;
        if (v=='homedd'){
            a = bedrooms;
        } else if (v=='officedd'){
            a = offices
        }
        for (i = 0; i < a.length; ++i) {
            var option = document.createElement("option");
            option.text = a[i];
            x.add(option);
        }
    }
    function load() {
        setSelect('homedd');
    }
    window.onload = load;

</script>
<input type="radio" name="bb" value="home"   onclick="setSelect('homedd')" checked > Home <br>
<input type="radio" name="bb" value="office" onclick="setSelect('officedd')" > Office <br>
<label>Size</label>
<select name="bedroom" id="bedroom" style="color: #8E9092; /*height: 38px;width: 228px;*/"  >
</select>
    • Vielen Dank, Herr jac, Es funktioniert einwandfrei..
    InformationsquelleAutor jac
Schreibe einen Kommentar