CODEWITHSUNDEEP
javascriptjqueryhtml
taek
taek

Reputation: 1119

Change select box value depending other selected option box

i am new to Javascript/ Jquery

so my problem is : i want to change the select/option box text and value depending on the other selected option/box

so for examplemy first option is :

<select id="gender">
        <option>Select Your Gender</option>
        <option value="Male">Male</option>
        <option value="Female">Female</option>
</select>

and then one i want to change depending on selected option is : When its male :

<select id="name">
        <option>Select Your Name</option>
        <option value="Male1">Male 1</option>
        <option value="Male2">Male 2</option>
</select>

when its female :

<select id="name">
        <option>Select Your Name</option>
        <option value="female1">Female 1</option>
        <option value="female2">Female 2</option>
</select>

Thanks for the help! :)

Upvotes: 1

Views: 12341

Answers (7)

Andi AR
Andi AR

Reputation: 2898

Follow the Practice:

  • Do not hardcode options this case.Best practice is get value from Json.
  • Then later changes are easy instead of change all codings.
  • Build dynamic Dropdowns. Dont Hide and Show.

HTML

<select id="gender">
        <option>Select Your Gender</option>
        <option value="Male">Male</option>
        <option value="Female">Female</option>
</select>   

    <select id="gtr" name="location" placeholder="Anycity"></select>

Jquery

jQuery(function($) {
    var gender = {
        'Male': ['Male1', 'male2'],
        'Female': ['Female1','Female1'],
      
    }
    
    var $gndr = $('#gtr');
    $('#gender').change(function () { debugger
        var GNDR = $(this).val(), gndrs = gender[GNDR] || [];
        
        var html = $.map(gndrs, function(gndr){
            return '<option value="' + gndr + '">' + gndr + '</option>'
        }).join('');
        $gndr.html(html);$gndr.append(new Option("Select Name", "0"));$gndr.val("0");
    });
});

JsFiddle

https://jsfiddle.net/2pza5/1135/

Upvotes: 1

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

There you go with DEMO

var options=""; //store the dynamic options
$("#gender").on('change',function(){ //add a change event handler to gender select
    var value=$(this).val(); //get its selected value
    options="<option>Select Your Name</option>"
    if(value=="Male") //value ==Male then set male required options
    {
        options+="<option value='Male1'>Male 1</option>"
                +"<option value='Male2'>Male 2</option>";
        $("#name").html(options);
    }
    else if(value=="Female") //else set female required options
    {
        options+='<option value="female1">Female 1</option>'
                 +'<option value="female2">Female 2</option>';
        $("#name").html(options);
    }
    else
        $("#name").find('option').remove() //if first default text option is selected empty the select
});

Upvotes: 3

Ashish Kumar
Ashish Kumar

Reputation: 3039

I would suggest to have a better HTML architecture to achieve this kind of things. Have each name in one Dropdown only and categorise with some data attribute. When changing the value of Gender Dropdown, filter with type and toggle the options. Follow this:

$(function(){
	$("#gender").on("change", function(){
        var $target = $("#name").val(""),
            gender = $(this).val();
        
        $target
            .toggleClass("hidden", gender === "")
            .find("option:gt(0)").addClass("hidden")
        	.siblings().filter("[data-type="+gender+"]").removeClass("hidden"); 
    });
});
.hidden{
    display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="gender">
        <option value="">Select Your Gender</option>
        <option value="Male">Male</option>
        <option value="Female">Female</option>
</select> 
<select id="name" class="hidden">
        <option value="">Select Your Name</option>
        <option value="Male1" data-type="Male">Male 1</option>
        <option value="Male2" data-type="Male">Male 2</option>
        <option value="female1" data-type="Female">Female 1</option>
        <option value="female2" data-type="Female">Female 2</option>
</select>

Fiddle link: http://jsfiddle.net/ashishanexpert/qzxedcut/

Upvotes: 2

George
George

Reputation: 36786

Whenever a change occurs, use the value of the gender dropdown to populate the names one. We use a for loop to produce more than one option per gender.

$('#gender').change(function(){
   if(!this.selectedIndex) return;

   var gender = $(this).val(),
       $name = $('#name').empty(),
       $option = $('<option />').text('Select Your Name').appendTo($name);

   for(var i = 1; i <= 2; i++)
       $option.clone().prop('value', gender + i).text(gender + ' ' + i).appendTo($name);
});

JSFiddle

Upvotes: 1

Suchit kumar
Suchit kumar

Reputation: 11859

Try this: 

$("#gender").on("change",function(){
  var sel="";
  if($(this).val() == "Female"){
    sel=' <option>Select Your Name</option>';
       sel+=' <option value="female1">Female 1</option>'
        sel+='<option value="female2">Female 2</option>'
   
    }else{// no other if since you have only two options male/female
     sel= '<option>Select Your Name</option>';
       sel+= '<option value="Male1">Male 1</option>';
       sel+= '<option value="Male2">Male 2</option>';
      }
   $("#name").html(sel);
  
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="gender">
        <option>Select Your Gender</option>
        <option value="Male">Male</option>
        <option value="Female">Female</option>
</select>   

<select id="name">
     
</select>

Upvotes: 0

guradio
guradio

Reputation: 15555

FIDDLE

$('#gender').change(function (e) {
    var val = $("option:selected", this).val()
    console.log(val);
if(val =='Male'){
    $('#name').find('option.female').hide();
    $('#name').find('option.male').show();
}else if(val =='Female'){
    $('#name').find('option.female').show();
    $('#name').find('option.male').hide();
}else{
    
}
});

Added class for each option since it is static. Then you can hide the option from second select depending on the value of first select

Upvotes: 0

PaolaG
PaolaG

Reputation: 814

I suggest you to try this way:

Change you jquery:

<select id="nameMale">
        <option>Select Your Name</option>
        <option value="Male1">Male 1</option>
        <option value="Male2">Male 2</option>
</select> 

<select id="nameFemale">
        <option>Select Your Name</option>
        <option value="Male1">Male 1</option>
        <option value="Male2">Male 2</option>
</select>

Inser this javascript:

        <script>
            <![CDATA[
                $(function() {

              $('#nameFemale').hide();
              $('#nameMale').hide();

  function changeGen(val){
     if(val == 'Female'){
         $('#nameFemale').show();
         $('#nameMale').hide();
      }else{
        $('#nameFemale').hide();
        $('#nameMale').show();
      }
  }

  $('#gender').change(function() {
            changeGen($('#gender').val());
    });

    });

 ]]>    
</script>

Upvotes: 0

Related Questions