First Dropdown selecting second and third dropdown

First Dropdown selecting second and third dropdown - javascript

html-
<label >Parameter Name: </label>
<select id="name" name="name" required>
</select> </br> </br>
<label >Address: </label>
<select class= "address" type=text id="address" name="address" style="width:14em;" required>
</select> </br> </br>
<label >Data Size: </label> </br>
<select type=text id=sizeSelect name="size"style="width: 14em;" required>
</select> </br> </br>
js-
function processFile(e) {
var file = e.target.result,
results;
if (file && file.length) {
results = file.split(",");
$('select').children().remove();
for (var i = 1; i < results.length; i=i+8) {
if(typeof results[i] !== 'undefined') {
$("select[name='address']").each(function() {
$(this).append('<option val="i">' + results[i] + '</option>');
});
}
if(typeof results[i+6] !== 'undefined') {
$("select[name='name']").each(function() {
$(this).append('<option val="i">' + results[i+6] + '</option>');
});
}
if(typeof results[i+1] !== 'undefined') {
$("select[name='size']").each(function() {
$(this).append('<option val="i">' + results[i+1] + '</option>');
});
}
}
}
}
I want to somehow allow the interface so that when the client selects the address option with value 1 then the name and size of that value are selected automatically. Any ideas?

Using jQuery .val() you can get and set the values for select tags.
If the options of each select contains an attribute with a value of the next select option to be selected, you can reduce all to:
$(function () {
$('#address').on('change', function(e) {
var optionSelected = $(this).find('option:selected');
$('#name').val(optionSelected.attr('name'));
$('#sizeSelect').val(optionSelected.attr('sizeSelect'));
})
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<form>
<label>Parameter Name: </label>
<select id="name" name="name" required>
<option></option>
<option value="1" >Name 1</option>
<option value="2">Name 2</option>
</select><br><br>
<label>Address: </label>
<select class="address" type=text id="address" name="address" style="width:14em;" required>
<option></option>
<option value="1" name="1" sizeSelect="1">Address 1</option>
<option value="2" name="2" sizeSelect="2">Address 2</option>
</select> <br><br>
<label>Data Size: </label> </br>
<select type=text id=sizeSelect name="size" style="width: 14em;" required>
<option></option>
<option value="1">Size 1</option>
<option value="2">Size 2</option>
</select> <br> <br>
</form>

Related

Get desired value of selectbox through jquery

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
});

jquery add values dropdown using data attribute

I have a simple HTML form:
<div class="form-group">
<label class="control-label col-md-2">Monday<span class="required"> * </span></label>
<div class="col-md-5">
<select name="monday_main" id="monday_main_list" class="form-control">
<option value=""></option>
<option value="Carlow" data-staff="1" data-price="100" data-km="100" data-call="200" >Carlow</option>
<option value="Cavan" data-staff="1" data-price="100" data-km="100" data-call="200" >Cavan</option>
</select>
</div>
<div class="col-md-5">
<select name="monday_side" id="monday_side_list" class="form-control">
<option value=""></option>
<option value="Dublin" data-staff="1" data-price="200" data-km="200" data-call="400" >Dublin</option>
<option value="Galway" data-staff="1" data-price="200" data-km="200" data-call="400" >Galway</option>
</select>
</div>
</div>
<input type="number" placeholder="" value="" name="amountPrice" id="amountPrice">
<input type="number" placeholder="" value="" name="amountKm" id="amountKm">
<input type="number" placeholder="" value="" name="amountCall" id="amountCall">
<input type="number" placeholder="" value="" name="amountStaff" id="amountStaff">
What I need to achieve is to calculate values for each data attribute separately (e.g. separate value for data-staff, data-price, data-km and data-call) on changing options and then displaying values in 4 separate input fields.
I am not sure even if it is possible, but if so I would be very grateful if someone could help me

// good idea to cache elements you'll be re-using
var dropdowns = $('select'),
inputPrice = $('#amountPrice'),
inputKm = $('#amountKm'),
inputCall = $('#amountCall'),
inputStaff = $('#amountStaff');
// attach 'onchange' event handler to all dropdowns
dropdowns.change(function () {
var amountPrice = 0,
amountKm = 0,
amountCall = 0,
amountStaff = 0;
// for each dropdown, tally amounts
dropdowns.each(function () {
// get selected option
var option = $('option:selected', this);
amountPrice += parseInt(option.data('price'), 10);
amountKm += parseInt(option.data('km'), 10);
amountCall += parseInt(option.data('call'), 10);
amountStaff += parseInt(option.data('staff'), 10);
});
// set inputs
inputPrice.val(amountPrice);
inputKm.val(amountKm);
inputCall.val(amountCall);
inputStaff.val(amountStaff);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="control-label col-md-2">Monday<span class="required"> * </span></label>
<div class="col-md-5">
<select name="monday_main" id="monday_main_list" class="form-control">
<option value=""></option>
<option value="Carlow" data-staff="1" data-price="100" data-km="100" data-call="200" >Carlow</option>
<option value="Cavan" data-staff="1" data-price="100" data-km="100" data-call="200" >Cavan</option>
</select>
</div>
<div class="col-md-5">
<select name="monday_side" id="monday_side_list" class="form-control">
<option value=""></option>
<option value="Dublin" data-staff="1" data-price="200" data-km="200" data-call="400" >Dublin</option>
<option value="Galway" data-staff="1" data-price="200" data-km="200" data-call="400" >Galway</option>
</select>
</div>
</div>
<input type="number" placeholder="" value="" name="amountPrice" id="amountPrice">
<input type="number" placeholder="" value="" name="amountKm" id="amountKm">
<input type="number" placeholder="" value="" name="amountCall" id="amountCall">
<input type="number" placeholder="" value="" name="amountStaff" id="amountStaff">

I am not sure if I follow your question but you can access to those data with a change listener.
$('#monday_main_list').on('change', function() {
if($(this).val()!=='') {
var selectedOption = $(this).find('option[value=' + this.value + ']').first();
if (selectedOption) {
var data = selectedOption.data();
console.log(data);
}
}
})

JQuery - random code generator on selecting data in select options without if condition

I'm writing the code for generating random code using jQuery. It was working fine. But I used if condition to achieve that. What I need is to write that function without if conditions... how can I get that ?
function getcodes()
{
var input_data = $('.getvalue').val();
var select_data = $('.control').val();
if(select_data == "Binary" )
{
select_data = "BY";
}
else if(select_data == "Alpha" )
{
select_data = "AA";
}
else if(select_data == "AlphaNumeric" )
{
select_data = "AN";
}
else if(select_data == "Numeric" )
{
select_data = "NC";
}
else
{
select_data ="";
}
$('.disabled').val(input_data + select_data);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="selector">
<div class="get-values">
<input type="text" value="" class="getvalue">
<select class="control">
<option value="">select</option>
<option value="Binary">Binary</option>
<option value="Alpha">Alpha</option>
<option value="AlphaNumeric">AlphaNumeric</option>
<option value="Numeric">Numeric</option>
</select>
<input type="button" value="getcode" class="getcode" onclick="getcodes()">
<input type="text" value="" class="disabled" disabled>
</div>
</div>

If you can change value of options, use it, else - use data api
function getcodes() {
$('.disabled').val($('.getvalue').val() + $('.control option:selected').data('val'));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="selector">
<div class="get-values">
<input type="text" value="" class="getvalue">
<select class="control">
<option value="" data-val="">select</option>
<option value="Binary" data-val="BY">Binary</option>
<option value="Alpha" data-val="AA">Alpha</option>
<option value="AlphaNumeric" data-val="AN">AlphaNumeric</option>
<option value="Numeric" data-val="NC">Numeric</option>
</select>
<input type="button" value="getcode" class="getcode" onclick="getcodes()">
<input type="text" value="" class="disabled" disabled>
</div>
</div>

Try with single line if condition
function getcodes() {
var input_data = $('.getvalue').val();
var select_data = $('.control').val();
select_data = select_data == "Binary" ? "BY" : (select_data == "Alpha") ? "AA" : (select_data == "AlphaNumeric") ? "AN" : (select_data == "Numeric") ? "NC" : "";
$('.disabled').val(input_data + select_data);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="selector">
<div class="get-values">
<input type="text" value="" class="getvalue">
<select class="control">
<option value="">select</option>
<option value="Binary">Binary</option>
<option value="Alpha">Alpha</option>
<option value="AlphaNumeric">AlphaNumeric</option>
<option value="Numeric">Numeric</option>
</select>
<input type="button" value="getcode" class="getcode" onclick="getcodes()">
<input type="text" value="" class="disabled" disabled>
</div>
</div>

You should create an array for that!
function getcodes()
{
var input_data = $('.getvalue').val();
var select_data_input = $('.control').val();
var array = ["BY","AA","AN","NC"];
var select_data = array[select_data_input];
$('.disabled').val(input_data + select_data);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="selector">
<div class="get-values">
<input type="text" value="" class="getvalue">
<select class="control">
<option value="">select</option>
<option value="0">Binary</option>
<option value="1">Alpha</option>
<option value="2">AlphaNumeric</option>
<option value="3">Numeric</option>
</select>
<input type="button" value="getcode" class="getcode" onclick="getcodes()">
<input type="text" value="" class="disabled" disabled>
</div>
</div>

please try this code.
function getcodes()
{
var input_data = $('.getvalue').val();
var select_data = $('.control option:selected').data('code');
(typeof select_data != "undefined") ? $('.disabled').val(input_data + select_data) : "";
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="selector">
<div class="get-values">
<input type="text" value="" class="getvalue">
<select class="control">
<option value="">select</option>
<option value="Binary" data-code="BY">Binary</option>
<option value="Alpha" data-code="AA">Alpha</option>
<option value="AlphaNumeric" data-code="AN">AlphaNumeric</option>
<option value="Numeric" data-code="NC">Numeric</option>
</select>
<input type="button" value="getcode" class="getcode" onclick="getcodes()">
<input type="text" value="" class="disabled" disabled>
</div>
</div>

You can use object. Like this.
var codesArray = {
"Binary": "BY",
"Alpha": "AA",
"AlphaNumeric": "AN",
"Numeric": "NC"
};
function getcodes() {
var input_data = $('.getvalue').val();
var select_data = $('.control').val();
$('.disabled').val(input_data + codesArray[select_data]);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="selector">
<div class="get-values">
<input type="text" value="" class="getvalue">
<select class="control">
<option value="">select</option>
<option value="Binary">Binary</option>
<option value="Alpha">Alpha</option>
<option value="AlphaNumeric">AlphaNumeric</option>
<option value="Numeric">Numeric</option>
</select>
<input type="button" value="getcode" class="getcode" onclick="getcodes()">
<input type="text" value="" class="disabled" disabled>
</div>
</div>

Generate input box based on dropdown selection

I want to be able to make a selection from the dropdown list then have it generate a input box dynamically with an appropriate label above it. Example:
if i select school from dropdown:
<label>Enter School name:</label>
<input name="name">
if i select individual from dropdown:
<label>Enter Individual name:</label>
<input name="firstName">
<input name="lastName">
$('#elementreg').change(function() {
$('#input-holder').empty();
if ($(this).val() == "individual") {
$('#input-holder').append('<input type="text" name="input" value="test" >');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input-holder"></div>
<select class="medium" id="elementreg" name="youare">
<option value="" selected="selected"></option>
<option value="individual">For Yourself</option>
<option value="school">School</option>
<option value="group">Group</option>
<option value="studio">Studio</option>
</select>

Your code works, but why not show/hide? It is much faster than manipulating the DOM each time
$("#elementreg").on("change", function() {
var val = $(this).val();
$(".types").hide().find('input:text').val(''); // hide and empty
if (val) $("#" + val).show();
});
.types {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="medium" id="elementreg" name="youare">
<option value="" selected="selected"></option>
<option value="individual">For Yourself</option>
<option value="school">School</option>
<option value="group">Group</option>
<option value="studio">Studio</option>
</select>
<div class="types" id="individual">
<label>Enter Individual name:</label>
<input name="firstName">
<input name="lastName">
</div>
<div class="types" id="school">
<input .... />
</div>
Your version:
$("#elementreg").on("change", function() {
var val = $(this).val(), $div = $("#input-holder"),fields=" ";
switch (val) {
case "individual":
fields='<label>Your name: </label><input type="text" /><input type="text"/>';
break;
case "school":
fields='<label>School: </label><input type="text" />';
break;
}
$div.html(fields);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input-holder"> </div>
<select class="medium" id="elementreg" name="youare">
<option value="" selected="selected"></option>
<option value="individual">For Yourself</option>
<option value="school">School</option>
<option value="group">Group</option>
<option value="studio">Studio</option>
</select>

Show/hide span id on select selection

I want to show checkbox when i select ms from the select option value, checkbox is specified in span's id boxcheck. If other then show radio button with span id radiocheck
This is what I am trying which is not working:
$('#Typeselect').change(function() {
var value = this.value;
if (selectedValue === 'ms') {
$('#radiocheck').show();
$('#boxcheck').hide();
} else {
$('#radiocheck').hide();
$('#boxcheck').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4 operations">
<span style="display:none" id="boxcheck">
<input type="checkbox" name="correct['+val+questions+'][]"> Correct
</span>
<span id="radiocheck" style="display:none">
<input type="radio" name="correct['+val+questions+'][]"> Correct
</span>
</div>
<select class="form-control" id="Typeselect" name="question_type[]" Required>
<option value="txt">Text</option>
<option value="ms">Color text</option>
<option value="mm">Rainbow</option>
</select>

Working Demo
As mentioned in comment above, it meant to change Variable name from value to selectedValue.
Try the below solution:
$('#Typeselect').change(function() {
var selectedValue = this.value;
if (selectedValue === 'ms') {
$('#radiocheck').show();
$('#boxcheck').hide();
} else {
$('#radiocheck').hide();
$('#boxcheck').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4 operations">
<span style="display:none" id="boxcheck">
<input type="checkbox" name="correct['+val+questions+'][]"> Correct
</span>
<span id="radiocheck" style="display:none">
<input type="radio" name="correct['+val+questions+'][]"> Correct
</span>
</div>
<select class="form-control" id="Typeselect" name="question_type[]" Required>
<option value="txt">Text</option>
<option value="ms">Color text</option>
<option value="mm">Rainbow</option>
</select>

It's working now
$('#Typeselect').change(function() {
var value = this.value;
if (value === 'ms') {
$('#radiocheck').show();
$('#boxcheck').hide();
} else {
$('#radiocheck').hide();
$('#boxcheck').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4 operations">
<span style="display:none" id="boxcheck">
<input type="checkbox" name="correct['+val+questions+'][]"> Correct
</span>
<span id="radiocheck" style="display:none">
<input type="radio" name="correct['+val+questions+'][]"> Correct
</span>
</div>
<select class="form-control" id="Typeselect" name="question_type[]" Required>
<option value="txt">Text</option>
<option value="ms">Color text</option>
<option value="mm">Rainbow</option>
</select>

Use need to use value in if condition
$('#Typeselect').change(function() {
var value = this.value;
if (value === 'ms') {
$('#radiocheck').show();
$('#boxcheck').hide();
} else {
$('#radiocheck').hide();
$('#boxcheck').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4 operations">
<span style="display:none" id="boxcheck">
<input type="checkbox" name="correct['+val+questions+'][]"> Correct
</span>
<span id="radiocheck" style="display:none">
<input type="radio" name="correct['+val+questions+'][]"> Correct
</span>
</div>
<select class="form-control" id="Typeselect" name="question_type[]" Required>
<option value="txt">Text</option>
<option value="ms">Color text</option>
<option value="mm">Rainbow</option>
</select>

Try below code:
$('#Typeselect').change(function() {
//you had a typo here...
var selectedValue = this.value;
if (selectedValue === 'ms') {
$('#radiocheck').show();
$('#boxcheck').hide();
} else {
$('#radiocheck').hide();
$('#boxcheck').show();
}
});

We Keep Coding

JavaScript is the programming language of the Web.

First Dropdown selecting second and third dropdown - javascript

Related

Get desired value of selectbox through jquery

jquery add values dropdown using data attribute

JQuery - random code generator on selecting data in select options without if condition

Generate input box based on dropdown selection

Show/hide span id on select selection

Categories

Resources