We Keep Coding

By selecting element in one selection Box another selection box can't be selected i.e. another selection box will be in hidden format

<div class="custom-select" style="width:200px;">
<select>
<option value="0">Select Language:</option>
<option value="1">HTML</option>
<option value="2">RUBY</option>
</select>
</div>
After selecting one select box another can't be edited
<div class="custom-select" style="width:200px;">
<select>
<option value="0">Select Language:</option>
<option value="1">HTML</option>
<option value="2">RUBY</option>
</select>
</div>
The above selection menu can't be selected.

This should help. You will however need JQuery to make this work.
$('select[name=select1]').on('change', function() {
$('select[name=select2]').prop("disabled", true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="custom-select" style="width:200px;">
<select name="select1">
<option selected disabled value="0">Select Language:</option>
<option value="1">HTML</option>
<option value="2">RUBY</option>
</select>
</div>
<div class="custom-select" style="width:200px;">
<select name="select2">
<option value="0">Select Language:</option>
<option value="1">HTML</option>
<option value="2">RUBY</option>
</select>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

dynamically calculation of multiple select option data value

in my form there is 5 nationality selection box with data-value in it.
<select id="visitorcount" name="visitorcount">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<div id="person1">
<select id="country1" name="visitor1">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
</div>
<div id="person2" style="display:none">
<select id="country2" name="visitor2">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
</div>
<div id="person3" style="display:none">
<select id="country3" name="visitor3" style="display:none">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
</div>
<div id="person4" style="display:none">
<select id="country4" name="visitor4" style="display:none">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
</div>
<div id="person5" style="display:none">
<select id="country5" name="visitor5" style="display:none">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
</div>
<div id="totalcost"></div>
first option is static and always present in form and other 4 select will be shown only when we select number of visitors.
Now what i want is, when i select option 1 it should show the data-fee value in div totalcost.
when we select option two then it should show option1 + Option 2 data-fee value, and so on similar with all other select option.
and when we reduce the number of visitor, it should reduce the cost.
i am just not able to understand how to deal with this.
i can get cost of first select option like this but do not how to deal with dynamically, showing and hiding the div according to number of visitor and then select the options and get the prices and reduce the prices when reduce number of visitor.
<script>
$('body').on('change', '#country1', function() {
var priceforcountry = $('option:selected', this).data('fee');
$('#totalcost').text(priceforcountry);
//alert(priceforcountry);
});
</script>
and when we select country in option 1 it should auto select the same option in all other 4 select boxes.

Like this?
You can use each by class selector for dynamic then check css display
$('body').on('change', '#visitorcount', function() {
for (var i = 1; i <= 5; i++) {
if (i <= $('#visitorcount').val()) {
$('#person' + i).show();
$('#country' + i).show();
} else {
$('#person' + i).hide();
$('#country' + i).hide();
}
}
});
$('body').on('change', '.ct,#visitorcount', function() {
var priceforcountry = 0;
$('.ct').each(function(index,element){
if($(element).parent().css("display") != "none"){
priceforcountry += +$('option:selected', this).data('fee');
}
});
$('#totalcost').text(priceforcountry);
//alert(priceforcountry);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="visitorcount" name="visitorcount">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<div id="person1">
<select id="country1" name="visitor1" class="ct">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
</div>
<div id="person2" style="display:none" >
<select id="country2" name="visitor2" class="ct">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
</div>
<div id="person3" style="display:none">
<select id="country3" name="visitor3" style="display:none" class="ct">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
</div>
<div id="person4" style="display:none">
<select id="country4" name="visitor4" style="display:none" class="ct">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
</div>
<div id="person5" style="display:none">
<select id="country5" name="visitor5" style="display:none" class="ct">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
</div>
<div id="totalcost"></div>

jQuery - Autoselect option on selectbox doesn't function well

I have 2 select boxes. When I select an option on selectbox1, it automatically changes the corresponding value on selectbox2 regardless of value but order.
The thing is, the code is working fine until after a few tries. Then even if I change the option on selectbox1, it doesn't update the one on selectbox2.
To reproduce the issue; go through A to E, then repeat.
Code:
$(".firstSelectBox").change(function(e) {
var selectedOption = $("option:selected", this);
var idx = $(this).children().index(selectedOption)
var secChildIdx = $(".secondSelectBox").children()[idx];
$(".secondSelectBox").find(":selected").removeAttr('selected');
$(secChildIdx).attr("selected", "selected");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="control-group">
<div class="controls">
<label>First Selectbox</label><br/>
<select class="firstSelectBox validate[required]">
<option value="1">Select A</option>
<option value="2">Select B</option>
<option value="3">Select C</option>
<option value="4">Select D</option>
<option value="5">Select E</option>
</select>
</div>
</div>
<br />
<div class="control-group">
<div class="controls">
<label>Second Selectbox</label><br />
<select class="secondSelectBox validate[required]">
<option value="A">Select 1</option>
<option value="B">Select 2</option>
<option value="C">Select 3</option>
<option value="D">Select 4</option>
<option value="E">Select 5</option>
</select>
</div>
</div>
Also JSFiddle version: https://jsfiddle.net/153w074d/

No need for all that code, just work with selectedIndex:
$(".firstSelectBox").change(function(e) {
var selectedIndex = $(this).get(0).selectedIndex;
$(".secondSelectBox").get(0).selectedIndex = selectedIndex;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="control-group">
<div class="controls">
<label>First Selectbox</label><br/>
<select class="firstSelectBox validate[required]">
<option value="1">Select A</option>
<option value="2">Select B</option>
<option value="3">Select C</option>
<option value="4">Select D</option>
<option value="5">Select E</option>
</select>
</div>
</div>
<br />
<div class="control-group">
<div class="controls">
<label>Second Selectbox</label><br />
<select class="secondSelectBox validate[required]">
<option value="A">Select 1</option>
<option value="B">Select 2</option>
<option value="C">Select 3</option>
<option value="D">Select 4</option>
<option value="E">Select 5</option>
</select>
</div>
</div>
What happened in your original code is that, in some way, the selected attributes are being messed around. Try this: Change to each option from A to E, then start over from A, the selection stops working. Then inspect the second select to see that there are more than one option with selected="selected" attribute. Not sure what caused that tho.

#DontVoteMeDown's answer will certainly work, but the reason you're having this issue is because of the discrepancy between .prop and .attr. Both are similar, but don't refer to the same, identical underlying value.
If you change the below two lines to use the .prop value instead of .attr, your code will work. See the working code example below.
$(".secondSelectBox").find(":selected").removeAttr('selected'); // change to .removeProp
$(secChildIdx).attr("selected", "selected"); // change to .prop
$(".firstSelectBox").change(function(e) {
var selectedOption = $("option:selected", this);
var idx = $(this).children().index(selectedOption)
var secChildIdx = $(".secondSelectBox").children()[idx];
$(".secondSelectBox").find(":selected").removeProp('selected');
$(secChildIdx).prop("selected", "selected");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="control-group">
<div class="controls">
<label>First Selectbox</label><br/>
<select class="firstSelectBox validate[required]">
<option value="1">Select A</option>
<option value="2">Select B</option>
<option value="3">Select C</option>
<option value="4">Select D</option>
<option value="5">Select E</option>
</select>
</div>
</div>
<br />
<div class="control-group">
<div class="controls">
<label>Second Selectbox</label><br />
<select class="secondSelectBox validate[required]">
<option value="A">Select 1</option>
<option value="B">Select 2</option>
<option value="C">Select 3</option>
<option value="D">Select 4</option>
<option value="E">Select 5</option>
</select>
</div>
</div>

You can also use prop to select option.
$(".firstSelectBox").change(function(e) {
var selectedIndex = $(this).get(0).selectedIndex;
$('.secondSelectBox option:eq('+selectedIndex+')').prop('selected', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="control-group">
<div class="controls">
<label>First Selectbox</label><br/>
<select class="firstSelectBox validate[required]">
<option value="1">Select A</option>
<option value="2">Select B</option>
<option value="3">Select C</option>
<option value="4">Select D</option>
<option value="5">Select E</option>
</select>
</div>
</div>
<br />
<div class="control-group">
<div class="controls">
<label>Second Selectbox</label><br />
<select class="secondSelectBox validate[required]">
<option value="A">Select 1</option>
<option value="B">Select 2</option>
<option value="C">Select 3</option>
<option value="D">Select 4</option>
<option value="E">Select 5</option>
</select>
</div>
</div>

Listening to Select Menu and display Result: Javascript

I am using Shopify, but in case you haven't used it, my question should be able to be answered in javascript, it just would be nice if you have Shopify knowledge.
I have a select with options. Whenever an option is selected, I want that option to be displayed. It would need to be constantly be updated depending on what the user selects. I am not sure how to achieve this with javascript.
<select name="car" id="select">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select name="color" id="select-one">
<option value="volvo">Red</option>
<option value="saab">Oj</option>
<option value="mercedes">Purp</option>
<option value="audi">Black</option>
</select>
<div class="show">
Here is the option you selected, with the Color:
"Car" "Color"
</div>

First of all don't duplicate the id in both select-box. Secondly you can use onchange event of javascript like this:
<select name="car" class="car">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select name="color" class="color">
<option value="volvo">Red</option>
<option value="saab">Oj</option>
<option value="mercedes">Purp</option>
<option value="audi">Black</option>
</select>
<div class="show">
Here is the option you selected, with the Color:
"<div id="selected_car">Car</div>" "<div id="selected_color">Color</div>"
</div>
<script>
$('select').change(function(){
if($(this).hasClass('car')){
$('#selected_car').html("");
$('#selected_car').html($('option:selected',this).text());
}else{
$('#selected_color').html("");
$('#selected_color').text($('option:selected',this).text());
}
});
</script>

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function () {
$('select').change(function () {
szData = " Here is the option you selected, with the Color: " + $('#select').val() + '---' + $('#select-one option:selected').text();
$('div.show').html(szData)
});
});
</script>
</head>
<body>
<div class="show">
Here is the option you selected, with the Color:
"Car" "Color"
</div>
<select name="car" id="select">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select name="color" id="select-one">
<option value="volvo">Red</option>
<option value="saab">Oj</option>
<option value="mercedes">Purp</option>
<option value="audi">Black</option>
</select>
</body>
</html>

Dropdownlist using javascript

I have these 3 dropdownlist. I want to show only 1 dropdownlist according to values selected in the first DDL. can someone help me with this :
HTML :
<div class="field">
<label for="message_for">Message For</label>
<select id="message_for" name="message_for" title="Message For" >
<option value='shop'>Shops</option>
<option value='offers'>Offers</option>
<option value='events'>Events</option>
<option value='consultancy'>Consultancy</option>
</select>
</div>
<div class="field1">
<label for="message_type">Message Type</label>
<select id="offer_type" name="offer_type" title="Offer Type" >
<option value='special'>Special</option>
<option value='recommend'>Recommended</option>
<option value='day'>Offer of the Day</option>
<option value='hot'>Hot Offer</option>
</select>
</div>
<div class="field2">
<label for="message_type">Message Type</label>
<select id="shop_type" name="shop_type" title="Shop Type" >
<option value='mall'>Mall</option>
<option value='warehouse'>Warehouse</option>
<option value='food'>Food</option>
<option value='banquet'>Banquet</option>
<option value='service'>Service</option>
<option value='cosmetics'>Cosmetics</option>
<option value='fashion'>Fashion</option>
</select>
</div>
<div class="field3">
<label for="message_type">Message Type</label>
<select id="event_type" name="event_type" title="Event Type" >
<option value='social'>Social</option>
<option value='other'>Other</option>
</select>
</div>
Means if i select shops in first DDL then the second DDL should be DIV field2

Basically, the idea is to get the value of message_for select using jquery and show or hide other selects based on its value.
$("#message_for").on("change", function(){
if($(this).val() == "shop"){
$(".field1").show();
}
//here add more cases to show relevant selects
});
I have created this jsfiddle for you - https://jsfiddle.net/guranjanpsingh/h9prdxyy/2/

The easiest way is to add classes to divs with the same name as option values in order to target them.
$('div:not(".general")').hide();
$('#message_for').on('change', function() {
$('div:not(".general")').hide();
$('.' + $(this).val()).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="general">
<label for="message_for">Message For</label>
<select id="message_for" name="message_for" title="Message For">
<option value=''>Please Select</option>
<option value='shop'>Shops</option>
<option value='offers'>Offers</option>
<option value='events'>Events</option>
<option value='consultancy'>Consultancy</option>
</select>
</div>
<div class="shop">
<label for="message_type">Message Type</label>
<select id="offer_type" name="offer_type" title="Offer Type">
<option value='special'>Special</option>
<option value='recommend'>Recommended</option>
<option value='day'>Offer of the Day</option>
<option value='hot'>Hot Offer</option>
</select>
</div>
<div class="offers">
<label for="message_type">Message Type</label>
<select id="shop_type" name="shop_type" title="Shop Type">
<option value='mall'>Mall</option>
<option value='warehouse'>Warehouse</option>
<option value='food'>Food</option>
<option value='banquet'>Banquet</option>
<option value='service'>Service</option>
<option value='cosmetics'>Cosmetics</option>
<option value='fashion'>Fashion</option>
</select>
</div>
<div class="events">
<label for="message_type">Message Type</label>
<select id="event_type" name="event_type" title="Event Type">
<option value='social'>Social</option>
<option value='other'>Other</option>
</select>
</div>