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>

dynamic drop down menu for labels

I currently have a drop down menu displaying 3 options. Once the user selects an option, another drop down menu will display itself based on the choice from the first menu.
The first dropdown(InDiameter):
<label for="innerdiameter"><i class="fa fa-asterisk text-danger"></i>1. Inner Diameter:(*)
<select id="InDiameter" name="InDiameter">
<option value="N/A">Select</option>
<option value="Standard(1.0-5.0mm)">Standard(1.0-5.0mm)</option>
<option value="Microcuff(0.3-0.75mm)">Microcuff(0.3-0.75mm)</option>
<option value="Nanocuffs(56-250μm)">Nanocuffs(56-250μm)</option>
</select>
</label>
Second dropdown(Standard):
<label for="standard"> <br>1a. Inner Diameter for Standard:
<select id="Standard" name="Standard">
<option value="N/A">Select</option>
<option value="1mm">1mm</option>
<option value="1.5mm">1.5mm</option>
<option value="2mm">2mm</option>
<option value="2.5mm">2.5mm</option>
<option value="3mm">3mm</option>
<option value="3.5mm">3.5mm</option>
<option value="4mm">4mm</option>
<option value="5mm">5mm</option>
</select>
</label>
I've tried several js solutions, but none of them have worked. Any help would be appreciated.

in this case you need some one code of javascript and jquery:
the html code:
<label >Select:</label>
<select id="InDiameter" name="InDiameter" required onchange="miFuncion($(this).val());">
<option value="N/A">Select</option>
<option value="Standard">Standard(1.0-5.0mm)</option>
<option value="Microcuff">Microcuff(0.3-0.75mm)</option>
<option value="Nanocuffs">Nanocuffs(56-250μm)</option>
</select>
<div id="selectStandar" style="display:none;">
<label>Standard:</label>
<select id="Standard" name="Standard">
<option>Select</option>
<option value="1mm">1mm</option>
<option value="1.5mm">1.5mm</option>
<option value="2mm">2mm</option>
<option value="2.5mm">2.5mm</option>
<option value="3mm">3mm</option>
<option value="3.5mm">3.5mm</option>
<option value="4mm">4mm</option>
<option value="5mm">5mm</option>
</select>
</div>
<div id="selectMicrocuff" style="display:none;">
<label>Microcuff:</label>
<select id="Microcuff" name="Microcuff">
<option value="1">Microcuff 1</option>
<option value="2">Microcuff 2</option>
</select>
</div>
code jquery and Javascript
function miFuncion(value_selected){
if (value_selected=='Standard'){
$("#selectStandar").show();
$("#selectMicrocuff").hide();
}
if (value_selected=='Microcuff'){
$("#selectMicrocuff").show();
$("#selectStandar").hide();
}
}//end function
in this case i validate the first select(InDiameter), take the value and if is a Standard i show the div that have the select with the options Standard..and etc..
is only a method exist differentes methods..
Verify here

JavaScript - output values from two different dropdown menus

I'm still new to Java Script, I'm trying to create a very simple tool, but I have some questions I can't seem to figure out how. Hope any of you can give me some ideas or examples here.
I have two drop down menus and I want to output the selected values and displayed them in a readable way. How can I use document.getElementId and onchange to write a function?
Any help would be greatly appreciated
Example,
Moving from (value from list_1) to (value from list_2)
<script type="text/javascript">
</script>
<div class="moving_1">
<span>* Moving from:</span><br/>
<select name="list_1" id="list_1">
<option value="CA">CA</option>
<option value="DC">DC</option>
<option value="PA">PA</option>
<option value="NY">NY</option>
</select>
</div>
<div class="moving_2">
<span>* Moving to:</span><br/>
<select name="list_2" id="list_2">
<option value="CA">CA</option>
<option value="DC">DC</option>
<option value="PA">PA</option>
<option value="NY">NY</option>
</select>
</div>
<p>Moving from (value from list_1) to (value from list_2)</p>

Hope it helps. If you have any questions, just ask in comments.
// We find element by id "list_1" then we add an event listener "change"
document.getElementById("list_1").addEventListener("change", function(e) {
// Now we find element by id "moving_1_result" and set its innerHTML to targets value aka list_2's value
document.getElementById("moving_1_result").innerHTML = e.target.value;
});
document.getElementById("list_2").addEventListener("change", function(e) {
document.getElementById("moving_2_result").innerHTML = e.target.value;
});
<div class="moving_1">
<span>* Moving from: <span id="moving_1_result"></span></span>
<br/>
<select name="list_1" id="list_1">
<option value="CA">CA</option>
<option value="DC">DC</option>
<option value="PA">PA</option>
<option value="NY">NY</option>
</select>
</div>
<div class="moving_2">
<span>* Moving to: <span id="moving_2_result"></span></span>
<br/>
<select name="list_2" id="list_2">
<option value="CA">CA</option>
<option value="DC">DC</option>
<option value="PA">PA</option>
<option value="NY">NY</option>
</select>
</div>

it relatively easy, try the following
//onchange handler
function changed(listId){
var list = document.getElementById(listId);
document.getElementById("val_"+listId).innerHTML = list.value;
}
//initialization
document.getElementById("val_list_1").innerHTML = document.getElementById("list_1").value;
document.getElementById("val_list_2").innerHTML = document.getElementById("list_2").value;
<div class="moving_1">
<span>* Moving from:</span><br/>
<select onchange="changed('list_1')" name="list_1" id="list_1">
<option value="CA">CA</option>
<option value="DC">DC</option>
<option value="PA">PA</option>
<option value="NY">NY</option>
</select>
</div>
<div class="moving_2">
<span>* Moving to:</span><br/>
<select onchange="changed('list_2')" name="list_2" id="list_2">
<option value="CA">CA</option>
<option value="DC">DC</option>
<option value="PA">PA</option>
<option value="NY">NY</option>
</select>
</div>
<p>Moving from <span id="val_list_1"></span> to <span id="val_list_2"></span></p>

Let's stay with your original code. You would need to add an eventListener to your dropdown menus and then overwrite the innerHTML of your paragraph.
You can identify your elements either by their class name or by their tag name.
It is preferable to have IDs and not just class names to make the identification process easier.
document.getElementsByClassName("moving_1")[0].addEventListener("change", update_text);
document.getElementsByClassName("moving_2")[0].addEventListener("change", update_text);
function update_text() {
document.getElementById("moving_text").innerHTML = "Moving from " + document.getElementsByClassName("moving_1")[0].getElementsByTagName('select')[0].value + " to " + document.getElementsByClassName("moving_2")[0].getElementsByTagName('select')[0].value;
}
<div class="moving_1">
<span>* Moving from:</span><br/>
<select name="list_1" id="list_1">
<option value="CA">CA</option>
<option value="DC">DC</option>
<option value="PA">PA</option>
<option value="NY">NY</option>
</select>
</div>
<div class="moving_2">
<span>* Moving to:</span><br/>
<select name="list_2" id="list_2">
<option value="CA">CA</option>
<option value="DC">DC</option>
<option value="PA">PA</option>
<option value="NY">NY</option>
</select>
</div>
<p id="moving_text">Moving from (value from list_1) to (value from list_2)</p>

how to link category <option> tags

I want to link categories to their own pages. so I mean when I click to 'Hotels' it should open the page which is Category/Hotels
this is the current code
<select name="category">
<option value="">Any Category</option>
<option value="clubs">Clubs</option></a>
<option value="hotels">Hotels</option>
<option value="pubbar">Pub&Bar</option>
<option value="restaurants">Restaurants</option>
</select>
lets say I want to link like that
<option value="www.website.com/event_cat/clubs/> Clubs </option>
<option value="www.website.com/event_cat/hotels/> Hotels </option>
.. and so on
but when I do, its directing to this page:
www.website.com/events/?time=&category=%2Fevent_cat%2Fclubs%2F&location=

JSfiddle Demo
<html>
<body>
<form name="blah_blah">
<select name="ddmenu_name" id="ddmenu_name" style="width: 80% !important;">
<option value="" selected>Select Site</option>
<option value="http://www.yahoo.com">Yahoo!!!</option>
<option value="http://www.gmail.com">Gmail</option>
<option value="http://www.google.co.in">Google</option>
<option value="http://www.facebook.com">Facebook</option>
</select>
<input type="button" name="Submit" value="Go!" onClick="window.open(ddmenu_name.value,'newtab'+ddmenu_name.value)">
</form>
</body>
</html>

You just have to use full domain path with http or https(if its a secure server)
<option value="http://www.website.com/event_cat/clubs/> Clubs </option>
<option value="http://www.website.com/event_cat/hotels/> Hotels </option>

Since you have the first option already selected, in the first option, keep the value empty and add the onchange, as per the code below:
<select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
<option value="">Any Category</option>
<option value="www.website.com/event_cat/clubs/">Clubs</option>
<option value="www.website.com/event_cat/hotels/">Hotels</option>
<option value="pubbar">Pub&Bar</option>
<option value="restaurants">Restaurants</option>
</select>

populating state dropdown from country selection in asp

i have an old classic asp application that need to update. i need to add 2 dropdowns and the second one needs to be populated based on the first (ex. country and states). how do you do that using javascript?

UPDATE: Based on your comment below, I've updated my response to include code that will do what you're wanting. You can use the optgroup element to filter options based on what country is selected without having to use Ajax.
First way: (optgroup filtering)
Working example on jsFiddle.
HTML:
<select id="C_Country" name="C_Country" aria-required="true" class="required">
<option value="">-- Please Select --</option>
<option value="USA">United States</option>
<option value="CA">Canada</option>
</select>
<p>
<label for="C_State_Prov">State or Province <span title="required">*</span>
</label>
</p>
<select id="C_State_Prov" name="C_State_Prov" aria-required="true" class="required">
<option value="" selected="">-- Please Select --</option>
<optgroup label="United States">
<option value="AK">Alaska</option>
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="AZ">Arizona</option>
<option value="CA">California</option>
</optgroup>
<optgroup label="Canada">
<option value="AB">Alberta</option>
<option value="BC">British Columbia</option>
<option value="MB">Manitoba</option>
</optgroup>
</select>
JavaScript:
var state_province = $('#C_State_Prov option, #C_State_Prov optgroup');
state_province.hide();
$('#C_Country').change(function () {
state_province.hide();
$("#C_State_Prov optgroup[label='" + $(this).find(':selected').html() + "']")
.children()
.andSelf()
.show();
});
Second way: (Ajax)
Working example on jsFiddle.
Here's a rough idea of how to accomplish this. The URL defined in the jQuery should point to a location where the server-side code will generate the HTML needed based on the country the user selected (instead of being defined as a variable in the JavaScript).
HTML:
<form action="#">
<div>
<label for="country">Country:</label>
</div>
<div>
<select name="country" id="country">
<option value="">Please select</option>
<option value="us">United States</option>
</select>
</div>
<div id="stateContainer" class="hidden">
<div>
<label for="state">State</label>
</div>
<div>
<select id="state" name="state"></select>
</div>
</div>
<div>
<input type="submit" id="submit" name="submit" value="Submit">
</div>
</form>
CSS:
.hidden {
display: none;
}
JavaScript:
var $country = $("#country"),
$stateContainer = $("#stateContainer"),
$state = $("#state"),
url = "http://jsfiddle.net/htmled/KZ4jd/",
html = '<option value="al">Alabama</option><option value="ar">Arkansas</option>',
countryVal;
$country.change(function () {
countryVal = $country.val();
$stateContainer.show();
$state.html(html).load(loadUrl);
});