Get desired value of selectbox through jquery - javascript

Here i have three dropdowns with differents values and the code looks like as follows.
To get the value of the corresponding dropdown using jquery i had this but it always gets same value please have a look
$(".one").hide();
$(".two").hide();
$(".three").show();
var name_type=$("#abc_type_1").attr('name','type');
$("#abc_type_2").removeAttr('name');
$("#abc_type_3").removeAttr('name');
$("input[name=select_type]:radio").change(function () {
if($(this).val()=='1')
{
$(".one").show();
$(".two").hide();
$(".three").hide();
var name_type=$("#abc_type_1").attr('name','type');
$("#abc_type_2").removeAttr('name');
$("#abc_type_3").removeAttr('name');
}
else if($(this).val()=='2')
{
$(".one").hide();
$(".two").show();
$(".three").hide();
var name_type=$("#abc_type_2").attr('name','type');
$("#abc_type_1").removeAttr('name');
$("#abc_type_3").removeAttr('name');
}
else if($(this).val()=='3')
{
$(".one").hide();
$(".two").hide();
$(".three").show();
var name_type=$("#abc_type_3").attr('name','type');
$("#abc_type_1").removeAttr('name');
$("#abc_type_2").removeAttr('name');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left_1">
<input class="magic-radio" type="radio" name="select_type" id="1" value="1">
<label for="1">1</label>
<input class="magic-radio" type="radio" name="select_type" id="2" value="2">
<label for="2">2</label>
<input class="magic-radio" type="radio" name="select_type" id="3" checked value="3">
<label for="3">3</label>
</div>
<div class="left_2 one">
<select name="type" id="abc_type_1" class="form-control abc_type">
<option value="A">LSK-A</option>
<option value="B">LSK-B</option>
<option value="C">LSK-C</option>
</select>
</div>
<div class="left_2 two">
<select name="type" id="abc_type_2" class="form-control abc_type">
<option value="AB">LSK-AB</option>
<option value="AC">LSK-AC</option>
<option value="BC">LSK-BC</option>
</select>
</div>
<div class="left_2 three">
<select name="type" id="abc_type_3" class="form-control abc_type">
<option value="super">LSK-SUPER</option>
<option value="box">BOX-K</option>
</select>
</div>
Here i want to get the value of the selected select box but i can not get the correct value, please help me to solve.
var form_data={
agent_name: $('#agent_name').val(),
number: $('#number').val(),
number_from: $('#number_from').val(),
number_to: $('#number_to').val(),
quantity: $('#quantity').val(),
amount: $('#amount').val(),
date: $('#date').val(),
commision: $('#commision').val(),
profit: $('#profit').val(),
agent_amount: $('#agent_amount').val(),
user_id: $('#user_id').val(),
type: name_type.val(),
}

Problem with script is that you are not handling radio buttons and dropdown while extracting values for posting to server.
JS
var form_data = {
agent_name: $('#agent_name').val(),
number: $('#number').val(),
number_from: $('#number_from').val(),
number_to: $('#number_to').val(),
quantity: $('#quantity').val(),
amount: $('#amount').val(),
date: $('#date').val(),
commision: $('#commision').val(),
profit: $('#profit').val(),
agent_amount: $('#agent_amount').val(),
user_id: $('#user_id').val(),
type: $("#abc_type_"+$("input[name=select_type]:checked").val()).val()
};
Just replace your form_data with above script. If not works let me know.
This part getting checked value from the radio button.
$("input[name=select_type]:checked").val()
response is like this. 1 or 2 or 3.
$("#abc_type_"+$("input[name=select_type]:checked").val()).val()
Now jquery will get value by targeting the ID. eg #abc_type_1, #abc_type_2, #abc_type_3

You add a default value to the inputs and add function that runs when selects change like this Code:
$(".one").hide();
$(".two").hide();
$(".three").show();
var name_type = $("#abc_type_1").attr('name', 'type');
$("#abc_type_2").removeAttr('name');
$("#abc_type_3").removeAttr('name');
$("input[name=select_type]:radio").change(function() {
if ($(this).val() == '1') {
$(".one").show();
$(".two").hide();
$(".three").hide();
var name_type = $("#abc_type_1").attr('name', 'type');
$("#abc_type_2").removeAttr('name');
$("#abc_type_3").removeAttr('name');
} else if ($(this).val() == '2') {
$(".one").hide();
$(".two").show();
$(".three").hide();
var name_type = $("#abc_type_2").attr('name', 'type');
$("#abc_type_1").removeAttr('name');
$("#abc_type_3").removeAttr('name');
} else if ($(this).val() == '3') {
$(".one").hide();
$(".two").hide();
$(".three").show();
var name_type = $("#abc_type_3").attr('name', 'type');
$("#abc_type_1").removeAttr('name');
$("#abc_type_2").removeAttr('name');
}
});
$("select").change(function(e){
alert(e.target.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left_1">
<input class="magic-radio" type="radio" name="select_type" id="1" value="1">
<label for="1">1</label>
<input class="magic-radio" type="radio" name="select_type" id="2" value="2">
<label for="2">2</label>
<input class="magic-radio" type="radio" name="select_type" id="3" checked value="3">
<label for="3">3</label>
</div>
<div class="left_2 one">
<select name="type" id="abc_type_1" class="form-control abc_type">
<option value="">Select value</option>
<option value="A">LSK-A</option>
<option value="B">LSK-B</option>
<option value="C">LSK-C</option>
</select>
</div>
<div class="left_2 two">
<select name="type" id="abc_type_2" class="form-control abc_type">
<option value="">Select value</option>
<option value="AB">LSK-AB</option>
<option value="AC">LSK-AC</option>
<option value="BC">LSK-BC</option>
</select>
</div>
<div class="left_2 three">
<select name="type" id="abc_type_3" class="form-control abc_type">
<option value="">Select value</option>
<option value="super">LSK-SUPER</option>
<option value="box">BOX-K</option>
</select>
</div>

This is how you can get the current Select Box value
Simplest Example
HTML
<select class="select1_class_name" id="select1" data-userid="1">
<option value="1">1</option>
</select>
Jquery
$('#select1').change(function() {
var id = $(this).data('userid');
console.log(id); //you will get on change of selected dropdown
});

Related

Show/hide div and clear filed value when change

I have some div that will show depending on the select value. Suppose there are two input fields name 'Apartment and Bechelor' If I select 'Apartment' some div and select field will show related to the apartment. The problem I am facing is, I can't clear the field value when selecting another. Like, after selecting 'Apartment', I will select Bachelor. Now it should be clear the value of the field which was under the apartment so that If I again select 'Apartment', I will get default values or clean fields.
<div id="residential" >
<input type="radio" value="apartment" id="type_apartment" name="type" >
<label for="type_apartment" class="radio-inline"> Apartment/Flat </label>
<input type="radio" value="bachelor" id="type_bachelor" name="type">
<label for="type_bachelor" class="radio-inline"> Bechelor </label>
</div>
<!-- show this when apartment select -->
<div class="form-group " id="tenant-flat">
<select id="tenant-type" class="form-control" name="tenant">
<option value="">Anyone</option>
<option value="family">Family</option>
<option value="bechelor" >Bechelor</option>
</select>
</div>
<div class="form-group " id="flat-type">
<div class="col-sm-12">
<select id="" class="form-control" name="flat-type">
<option value="">Select Flat Type</option>
<option value="sublet" >Sublet</option>
<option value="full-flat" >Full Flat</option>
</select>
</div>
</div>
<!-- show this when bechelor select -->
<div class="form-group " id="r-type">
<div class="col-sm-12">
<select id="room" class="form-control" name="room_type">
<option value="">Select Room Type</option>
<option value="seat">Seat</option>
<option value="room" >Room</option>
</select>
</div>
</div>
<div class="form-group " id="tenant">
<div class="col-sm-12">
<select id="" class="form-control" name="tenant">
<option value="">Select Member</option>
<option value="family" >Family</option>
<option value="student" >Student</option>
<option value="job-holder" >Job Holder</option>
</select>
</div>
</div>
<script>
$(document).ready(function(){
$('#r-type').hide();
$('#tenant').hide();
$('#tenant-flat').hide();
$('#flat-type').hide();
$('.pretty input[type="radio"]').click(function(){
if($(this).attr('value') == 'apartment'){
$('#tenant-flat').show();
}
else{
$('#flat-type').hide();
}
});
var showDiv = document.getElementById("tenant-type");
showDiv.onchange = function(){
var hiddenDiv = document.getElementById("flat-type");
hiddenDiv.style.display = (this.value == "family") ? "block":"none";
var genderDiv = document.getElementById("gender");
genderDiv.style.display = (this.value == "bechelor") ? "block":"none";
};
$('.pretty input[type="radio"]').click(function(){
if($(this).attr('value') == 'bachelor' || $(this).attr('value') == 'sublet' || $(this).attr('value') == 'hostel' ){
$('#r-type').show();
$('#tenant').show();
$('#tenant-type').hide();
}
else{
$('#r-type').hide();
$('#tenant').hide();
$('#tenant-type').show();
}
});
});
</script>
to reset the dropdown options you can set the value of the select elements selectIndex property to 0 with this line:
$('.form-control').prop('selectedIndex', 0);
and in your code:
$(document).ready(function(){
$('#r-type').hide();
$('#tenant').hide();
$('#tenant-flat').hide();
$('#flat-type').hide();
$('#residential input[type="radio"]').click(function(){
if($(this).attr('value') == 'apartment'){
$('#tenant-flat').show();
$('#flat-type').show();
$('#r-type').hide();
$('#tenant').hide();
}
else{
$('#r-type').show();
$('#tenant').show();
$('#flat-type').hide();
$('#tenant-flat').hide();
}
$('.form-control').prop('selectedIndex', 0);
});
$('#tenent-type').on('change', function() {
if($('#flat-type').val =='family') {
$('#flat-type').show();
} else {
$('#flat-type').hide();
}
if($('#gender').val =='bechelor') {
$('#gender').show();
} else {
$('#gender').hide();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="residential" >
<input type="radio" value="apartment" id="type_apartment" name="type" >
<label for="type_apartment" class="radio-inline"> Apartment/Flat </label>
<input type="radio" value="bachelor" id="type_bachelor" name="type">
<label for="type_bachelor" class="radio-inline"> Bechelor </label>
</div>
<!-- show this when apartment select -->
<div class="form-group " id="tenant-flat">
<select id="tenant-type" class="form-control" name="tenant">
<option value="">Anyone</option>
<option value="family">Family</option>
<option value="bechelor" >Bechelor</option>
</select>
</div>
<div class="form-group " id="flat-type">
<div class="col-sm-12">
<select id="" class="form-control" name="flat-type">
<option value="">Select Flat Type</option>
<option value="sublet" >Sublet</option>
<option value="full-flat" >Full Flat</option>
</select>
</div>
</div>
<!-- show this when bechelor select -->
<div class="form-group " id="r-type">
<div class="col-sm-12">
<select id="room" class="form-control" name="room_type">
<option value="">Select Room Type</option>
<option value="seat">Seat</option>
<option value="room" >Room</option>
</select>
</div>
</div>
<div class="form-group " id="tenant">
<div class="col-sm-12">
<select id="" class="form-control" name="tenant">
<option value="">Select Member</option>
<option value="family" >Family</option>
<option value="student" >Student</option>
<option value="job-holder" >Job Holder</option>
</select>
</div>
</div>

How to limit count of checked checkboxes equal to select value using jquery?

I'm trying to limit the amount of checkboxes able to be checked according to what select option the user chooses i.e. option1 = 1 checkbox option 2 = 2 checkboxes and if they try to choose more then alert the user and .prop("checked", false).
but i just get weird stuff happening and i can't figure why please help!!
html:
<form>
<select onclick="systemSelected();" class="mySelectBox">
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
<option value="5">option5</option>
</select>
</form>
<form onclick="limitCheckbox(userSelected);">
<input type="checkbox" name="box1">
<input type="checkbox" name="box2">
<input type="checkbox" name="box3">
<input type="checkbox" name="box4">
<input type="checkbox" name="box5">
</form>
javascript:
var userSelected = 0;
function systemSelected() {
$(".mySelectBox option").each(function(){
if ($(this.selected)) {
userSelected = parseInt($(".mySelectBox").val());
}
});
}
function limitCheckbox(userSystem) {
$("input[type=checkbox]").click(function(){
if($("input[type=checkbox]:checked".length > userSystem)) {
$(this).prop("checked", false);
alert("too many numbers");
} else if ($("input[type=checkbox]:checked".length === 0 )) {
alert("please select a game too play");
}
});
}
Don't use alerts (Why should a user feel stupid)
Use the disabled property (Make a user see & know)
var $ckb = $('[name*=box]'),
$sel = $('.mySelectBox');
function ckkk () {
var ckd = $ckb.filter(":checked").length,
max = parseInt($sel.val(), 10);
if(ckd > max) $ckb.prop({checked:false, disabled:false});
else $ckb.not(":checked").prop({disabled: ckd >= max});
}
$ckb.add($sel).on("change", ckkk);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="mySelectBox">
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
<option value="5">option5</option>
</select>
<input type="checkbox" name="box1">
<input type="checkbox" name="box2">
<input type="checkbox" name="box3">
<input type="checkbox" name="box4">
<input type="checkbox" name="box5">
use $("input[type=checkbox]").on('change',function(){ selector which will fire event on every change of checkbox. And you can manage your cases with conditions in it.
Please check below snippet.
var userSelected = 0;
$("input[type=checkbox]").on('change',function(){
if($("input[type=checkbox]:checked").length > parseInt($(".mySelectBox").val())) {
$(this).prop("checked", false);
alert("too many numbers");
} else if ($("input[type=checkbox]:checked").length === 0 ) {
alert("please select a game too play");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select class="mySelectBox">
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
<option value="5">option5</option>
</select>
</form>
<form>
<input type="checkbox" name="box1">
<input type="checkbox" name="box2">
<input type="checkbox" name="box3">
<input type="checkbox" name="box4">
<input type="checkbox" name="box5">
</form>
$('input:checkbox').change(function() {
var number = $('.mySelectBox option:selected').val();
if ($('input:checkbox:checked').length > number) {
alert('more than selected')
$(this).prop('checked', false);//dont check the click checkbox
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select class="mySelectBox">
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
<option value="5">option5</option>
</select>
</form>
<form>
<input type="checkbox" name="box1">
<input type="checkbox" name="box2">
<input type="checkbox" name="box3">
<input type="checkbox" name="box4">
<input type="checkbox" name="box5">
</form>

Dropdown that has an option to input a field

I'm trying to include in the option, that if the user chooses/clicks the Other please specify option, he gets an option to give input. The characters thus input will instantly show relevant nationalities in a dropdown bar.
For a javascript function based solution for this, how can I make a call to that function in my html code or in dropdown. Thanks! :D
<div class="form-group">
<label for="status" class="control-label col-xs-4">
<p class="left">Nationality</p>
</label>
<select name="status" required>
<option></option>
<option value="" disabled selected>Filipino</option>
<option value='Filipino'>Filipino</option>
<option value='American'>American</option>
<option value='Japanese'>Japanese</option>
<option value='French'>French</option>
<option value='Sweden'>Sweden</option>
<option value='other'>Others please specify.</option>
</select>
</div>
Check the below code
var code = $('#code'); //input field
code.hide(); //initially hide
$("#status").on('change', function() {
var selected_option = $('#status option:selected').eq(0);
if (selected_option.val() == 'other') {
code.show();
code.val(''); //empty the field every-time selecting the option
console.log(selected_option.val());
} else {
code.hide();
}
console.log(selected_option.val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="status" class="control-label col-xs-4">
<p class="left">Nationality</p>
</label>
<select name="status" id="status" required>
<option></option>
<option value="" disabled selected>Filipino</option>
<option value='Filipino'>Filipino</option>
<option value='American'>American</option>
<option value='Japanese'>Japanese</option>
<option value='French'>French</option>
<option value='Sweden'>Sweden</option>
<option value='other'>Others please specify.</option>
</select>
<input type="text" name="code" id="code" />
</div>
Below is the full implementation
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Nationality</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="form-group">
<label for="status" class="control-label col-xs-4">
<p class="left">Nationality</p>
</label>
<select name="status" id="status" required="required">
<option></option>
<option value="" disabled="disabled" selected="selected">Filipino</option>
<option value='Filipino'>Filipino</option>
<option value='American'>American</option>
<option value='Japanese'>Japanese</option>
<option value='French'>French</option>
<option value='Sweden'>Sweden</option>
<option value='other'>Others please specify.</option>
</select>
<input type="text" name="code" id="code">
</div>
<script>
var code = $('#code'); //input field
code.hide(); //initially hide
$("#status").on('change', function() {
var selected_option = $('#status option:selected').eq(0);
if (selected_option.val() == 'other') {
code.show();
code.val(''); //empty the field every-time selecting the option
console.log(selected_option.val());
} else {
code.hide();
}
console.log(selected_option.val());
});
</script>
</body>
</html>
Try this:
You need to have a listener for your select and take the action as per the selected value..
var inputLabel = $('#inputLabel');
var onOptionChange = function() {
if (this.value == 'other') {
inputLabel.fadeIn(100);
} else {
inputLabel.fadeOut(100);
}
};
$('#status').on('change', onOptionChange);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-group">
<label for="status" class="control-label col-xs-4">Nationality</label>
<select name="status" id="status" required>
<option value="" disabled selected>Select your Nationality</option>
<option value='Filipino'>Filipino</option>
<option value='American'>American</option>
<option value='Japanese'>Japanese</option>
<option value='French'>French</option>
<option value='Sweden'>Sweden</option>
<option value='other'>Others please specify.</option>
</select>
<label for="input" id="inputLabel" style="display: none">Other:
<input type="text" id="input">
</label>
</div>

Reduce redundant function with javascript

I currently have the following Javascript running on my website, but I really feel like it is really redundant. So I am trying to condense it, since they are basically all the same thing, except different numbers appended. Is there a way I can wildcard the string?
$(document).ready(function() {
$('#type_1').change(function(){
if($(this).attr('value') == "dropdown"){
$('#dropdown_list_1').show();
}else {
$('#dropdown_list_1').hide();
}
});
$('#type_2').change(function(){
if($(this).attr('value') == "dropdown"){
$('#dropdown_list_2').show();
}else {
$('#dropdown_list_2').hide();
}
});
$('#type_3').change(function(){
if($(this).attr('value') == "dropdown"){
$('#dropdown_list_3').show();
}else {
$('#dropdown_list_3').hide();
}
});
$('#type_4').change(function(){
if($(this).attr('value') == "dropdown"){
$('#dropdown_list_4').show();
}else {
$('#dropdown_list_4').hide();
}
});
$('#type_5').change(function(){
if($(this).attr('value') == "dropdown"){
$('#dropdown_list_5').show();
}else {
$('#dropdown_list_5').hide();
}
});
});
This is what I have tried so far, but I couldn't get it to work. I believe it's because the for loop only runs once, and not on each event.
for(var i = 1; i <= 15; i++){
$('#type_'+i).change(function(){
if($(this).attr('value') == "dropdown"){
$('#dropdown_list_'+i).show();
}else {
$('#dropdown_list_'+i).hide();
}
});
}
EDIT:
I uploaded a JSFiddle if you want to test the code out.
HTML:
<form>
<hr class="separate" />
<!-- Question 1 -->
<h3 class="question_title">Survey Question 1</h3>
<label for="question_1">Question 1</label>
<input type="text" name="question_1" value="" class="question_field" id="question_1">
<label for="type_1">Type for Question 1</label>
<div class="option_field">
<select name="type_1" id="type_1" onchange="" size="1">
<option value="oneline">One Line Text Field</option>
<option value="freeresponse">Free Response Text Field</option>
<option value="rating10">Rating (1-10)</option>
<option value="rating4">Poor, Fair, Good, Excellent</option>
<option value="dropdown">Drop-Down Menu</option>
</select>
</div>
<div id="dropdown_list_1" class="dropdown_list">
<label for="question_1_list">Question 1 List</label><input type="text" name="question_1_list" value="" class="question_list" id="question_1_list" placeholder="Option A,Option B,Option C,Option D">
</div>
<hr class="separate" />
<!-- Question 2 -->
<h3 class="question_title">Survey Question 2</h3>
<label for="question_2">Question 2</label><input type="text" name="question_2" value="" class="question_field" id="question_2">
<label for="type_2">Type for Question 2</label>
<div class="option_field">
<select name="type_2" id="type_2" onchange="" size="1">
<option value="oneline">One Line Text Field</option>
<option value="freeresponse">Free Response Text Field</option>
<option value="rating20">Rating (1-10)</option>
<option value="rating4">Poor, Fair, Good, Excellent</option>
<option value="dropdown">Drop-Down Menu</option>
</select>
</div>
<div id="dropdown_list_2" class="dropdown_list">
<label for="question_2_list">Question 2 List</label><input type="text" name="question_2_list" value="" class="question_list" id="question_2_list" placeholder="Option A,Option B,Option C,Option D">
</div>
<hr class="separate" />
<!-- Question 3 -->
<h3 class="question_title">Survey Question 3</h3>
<label for="question_3">Question 3</label><input type="text" name="question_3" value="" class="question_field" id="question_3">
<label for="type_3">Type for Question 3</label>
<div class="option_field">
<select name="type_3" id="type_3" onchange="" size="1">
<option value="oneline">One Line Text Field</option>
<option value="freeresponse">Free Response Text Field</option>
<option value="rating30">Rating (1-10)</option>
<option value="rating4">Poor, Fair, Good, Excellent</option>
<option value="dropdown">Drop-Down Menu</option>
</select>
</div>
<div id="dropdown_list_3" class="dropdown_list">
<label for="question_3_list">Question 3 List</label><input type="text" name="question_3_list" value="" class="question_list" id="question_3_list" placeholder="Option A,Option B,Option C,Option D">
</div>
</form>
Give your <select> a class, e.g.
<select name="type_2" class="type" size="1">
Then use DOM traversal functions to find the associated dropdown DIV from the type SELECT:
$(document).ready(function () {
$(".dropdown_list").hide();
$(".type").change(function () {
$(this).closest(".option_field").next(".dropdown_list")
.toggle($(this).val() == "dropdown");
});
});
DEMO
Also, you should use .val() to get an input value, not .attr("value").

how can i use id of option in selectlist

my code is:
html:
<select id="select" onclick="getValue()">
<option id="profile-pic">profile pic</option>
<option id="product-image">product image</option>
</select>
<div id="radio-button">
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
male
</label>
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
female
</label>
</div>
<div id="dropdown">
<select id="select">
<option>profile pic</option>
<option>product image</option>
</select>
<select id="select">
<option>profile pic</option>
<option>product image</option>
</select>
</div>
jquery:
$(document).ready(function(){
$("div#dropdown").hide();
$("div#radio-button").hide();
});
$(document).ready(function(){
$("#select").change(function(){
$("div#dropdown").hide();
$("div#radio-button").show();
});
$("#select").click(function(){
$("div#dropdown").show();
$("div#radio-button").hide();
});
});
I want to use id of option in selectlist.
I have two option in select(1:profile-pic, 2:product-image) .
what i want:
when i clicked on profile pic it shows two radio button.
and if I select product image it shows two dropdown.
Please make sure to use an ID only once per page. An ID is a UNIQUE identifier of some element. I guess that "select" or "dropdown" aren't really unique page elements, so think of better names, for example "profile_picture_select" and "product_image_select".
Also, don't use inline javascript (onclick="getValue()").
EXAMPLE
HTML
<select id="function_select">
<option>profile_picture_select</option>
<option>product_image_select</option>
</select>
<div id="profile_picture_select">profile_picture_select</div>
<div id="product_image_select">product_image_select</div>
JavaScript (jQuery) (use indentation)
$(function () { // Same as $(document).ready().
$("#profile_picture_select").hide(); // By ID, so no element needed.
$("#product_image_select").hide();
// Just one document ready function.
$("#function_select").change(function () {
switch ($(this).val()) {
case "profile_picture_select":
$("#profile_picture_select").show();
$("#product_image_select").hide();
break;
case "product_image_select":
$("#profile_picture_select").hide();
$("#product_image_select").show();
break;
}
});
});
Check the jsFiddle: http://jsfiddle.net/c3Ehb/
JQuery
$(document).ready(function(){
$("#dropdown").hide();
$("#radio-button").hide();
$("#select").change(function () {
if($("#select option:selected").text() == 'profile pic')
{
$("#dropdown").hide();
$("#radio-button").show();
}
if($("#select option:selected").text() == 'product image')
{
$("#dropdown").show();
$("#radio-button").hide();
}
});
});
HTML
<select id="select">
<option>profile pic</option>
<option>product image</option>
</select>
<div id="radio-button">
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
male
</label>
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
female
</label>
</div>
<div id="dropdown">
<select id="select">
<option>profile pic</option>
<option>product image</option>
</select>
<select id="select">
<option>profile pic</option>
<option>product image</option>
</select>
</div>

Categories