Multiple jQuery Scripts in one HTML page Not working together - javascript
I have an HTML code with 3 jQuery Scripts and they are not working together correctly
can SomeOne Help me to solve this, please
I do to solve this problem as I don't have any experience in jQuery
and how can I fix this issue?
UPDATE It works now but one drop-down menu at a time how can I make them work together
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Availabe Restaurants:
<br>
Burgers:
<label><input type="radio" name="test" value="Garage" /> Burger Garage</label>
<label><input type="radio" name="test" value="Burger" /> Hardee's</label>
<label> <input type="radio" name="test" checked="checked" value="Factory" /> Burger Factory & More</label>
<br>
<select ID="DropDownList2" Height="18px" Width="187px">
<option Value="Factory_Style_1">Turbo Chicken</option>
<option Value="Factory_Style_2">Twin Turbo Chicken</option>
<option Value="Factory_Style_3">Garage Burger</option>
<option Value="Burger_Style_1">Chicken Fille</option>
<option Value="Burger_Style_2">Grilled Chicken Fillet</option>
<option Value="Burger_Style_3">Jalapeno Chicken</option>
<option Value="Garage_Style_1">Original Burger</option>
<option Value="Garage_Style_2">Twin Turbo Chicken</option>
<option Value="Garage_Style_3">Shuwa Burger</option>
</select>
<br>
Desserts:
<label><input type="radio" name="test1" checked="checked" value="Dip" /> Dip N Dip</label>
<label><input type="radio" name="test1" value="Camel" /> Camel Cookies</label>
<label> <input type="radio" name="test1" value="Ravenna" /> Ravenna Kunafa</label>
<br>
<select ID="DropDownList3" Height="18px" Width="187px">
<option Value="Dip_Style_1">Brownies Crepe</option>
<option Value="Dip_Style_2">Fettuccine Crepe</option>
<option Value="Dip_Style_3">Cream Puff Pyramid</option>
<option Value="Camel_Style_1">Brownie Fondant</option>
<option Value="Camel_Style_2">Lotus Pancake</option>
<option Value="Camel_Style_3">Camel Lava</option>
<option Value="Ravenna_Style_1">Konafa With Chocolate</option>
<option Value="Ravenna_Style_2">Konafa Mabrooma With Cheese</option>
<option Value="Ravenna_Style_3">Konafa Mabrooma With Cream</option>
</select>
<br>
Beverages:
<option>Dr.Shake</option>
<option>Juice Lab</option>
<option>Aseer Time</option>
<label><input type="radio" name="test2" checked="checked" value="Dr" />Dr.Shake</label>
<label><input type="radio" name="test2" value="Juice" /> Juice Lab</label>
<label> <input type="radio" name="test2" value="Aseer" /> Aseer Time</label>
<br>
<select ID="DropDownList4" Height="18px" Width="187px">
<option Value="Dr_Style_1">Pressure Milkshake</option>
<option Value="Dr_Style_2">Thermometer Milkshake</option>
<option Value="Dr_Style_3">Brain Recovery Milkshake</option>
<option Value="Juice_Style_1">G Lab</option>
<option Value="Juice_Style_2">Summer Vimto</option>
<option Value="Juice_Style_3">Summer Bubble Gum</option>
<option Value="Aseer_Style_1">Hormone Happiness</option>
<option Value="Aseer_Style_2">The King</option>
<option Value="Aseer_Style_3">Berry Smothey</option>
</select>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
(function(){
var options = $("#DropDownList2").html();
$('#DropDownList2 :not([value^="Fac"])').remove();
$('input:radio').change(function(e) {
var text = $(this).val();
$("#DropDownList2").html(options);
$('#DropDownList2 :not([value^="' + text.substr(0, 3) + '"])').remove();});
})();
(function(){
var options = $("#DropDownList3").html();
$('#DropDownList3 :not([value^="Dip"])').remove();
$('input:radio').change(function(e) {
var text = $(this).val();
$("#DropDownList3").html(options);
$('#DropDownList3 :not([value^="' + text.substr(0, 3) + '"])').remove();});
})();
(function(){
var options = $("#DropDownList4").html();
$('#DropDownList4 :not([value^="Dr"])').remove();
$('input:radio').change(function(e) {
var text = $(this).val();
$("#DropDownList4").html(options);
$('#DropDownList4 :not([value^="' + text.substr(0, 3) + '"])').remove();});
})();
</script>
</body>
</html>
The issue is that you have 3 functions that largely do the same thing and they all share the same variable. Instead of 3 functions that work on one element each, make one function that works on all 3 elements.
Note that no ids are needed here, just classes to organize the sets of radio buttons with the matching option elements.
See the comments inline:
<!DOCTYPE html>
<html>
<head>
<title>Order Selection</title>
<style>
/* Do all your styling in CSS not inline with the HTML */
select { width:187px; display:block; margin:10px; }
.hidden { display:none; }
fieldset { margin-top:1em; margin-bottom:1em; }
legend { font-weight:bold; }
</style>
</head>
<body>
<h1>Availabe Restaurants:</h1>
<fieldset>
<legend>Burgers:</legend>
<label><input type="radio" name="burgers" value="Garage"> Burger Garage</label>
<label><input type="radio" name="burgers" value="Burger"> Hardee's</label>
<label><input type="radio" name="burgers" value="Factory"> Burger Factory & More</label>
<select name="burgers">
<option value="">--- Select Burger ---</option>
<option class="Garage" value="Garage_Style_1">Original Burger</option>
<option class="Garage" value="Garage_Style_2">Twin Turbo Chicken</option>
<option class="Garage" value="Garage_Style_3">Shuwa Burger</option>
<option class="Burger" value="Burger_Style_1">Chicken Fille</option>
<option class="Burger" value="Burger_Style_2">Grilled Chicken Fillet</option>
<option class="Burger" value="Burger_Style_3">Jalapeno Chicken</option>
<option class="Factory" value="Factory_Style_1">Turbo Chicken</option>
<option class="Factory" value="Factory_Style_2">Twin Turbo Chicken</option>
<option class="Factory" value="Factory_Style_3">Garage Burger</option>
</select>
</fieldset>
<fieldset>
<legend>Beverages:</legend>
<label><input type="radio" name="beverages" value="Dr" />Dr.Shake</label>
<label><input type="radio" name="beverages" value="Juice"> Juice Lab</label>
<label> <input type="radio" name="beverages" value="Aseer"> Aseer Time</label>
<select name="beverages">
<option value="">--- Select Beverage ---</option>
<option class="Dr" value="Dr_Style_1">Pressure Milkshake</option>
<option class="Dr" value="Dr_Style_2">Thermometer Milkshake</option>
<option class="Dr" value="Dr_Style_3">Brain Recovery Milkshake</option>
<option class="Juice" value="Juice_Style_1">G Lab</option>
<option class="Juice" value="Juice_Style_2">Summer Vimto</option>
<option class="Juice" value="Juice_Style_3">Summer Bubble Gum</option>
<option class="Aseer" value="Aseer_Style_1">Hormone Happiness</option>
<option class="Aseer" value="Aseer_Style_2">The King</option>
<option class="Aseer" value="Aseer_Style_3">Berry Smothey</option>
</select>
</fieldset>
<fieldset>
<legend>Desserts:</legend>
<label><input type="radio" name="desserts" value="Dip"> Dip N Dip</label>
<label><input type="radio" name="desserts" value="Camel"> Camel Cookies</label>
<label> <input type="radio" name="desserts" value="Ravenna"> Ravenna Kunafa</label>
<select name="desserts">
<option value="">--- Select Dessert ---</option>
<option class="Dip" value="Dip_Style_1">Brownies Crepe</option>
<option class="Dip" value="Dip_Style_2">Fettuccine Crepe</option>
<option class="Dip" value="Dip_Style_3">Cream Puff Pyramid</option>
<option class="Camel" value="Camel_Style_1">Brownie Fondant</option>
<option class="Camel" value="Camel_Style_2">Lotus Pancake</option>
<option class="Camel" value="Camel_Style_3">Camel Lava</option>
<option class="Ravenna" value="Ravenna_Style_1">Konafa With Chocolate</option>
<option class="Ravenna" value="Ravenna_Style_2">Konafa Mabrooma With Cheese</option>
<option class="Ravenna" value="Ravenna_Style_3">Konafa Mabrooma With Cream</option>
</select>
</fieldset>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
// Hide the dropdown lists until a radio button selection is made
$("select").hide();
// Set up a change event handler for each of the radio buttons
$('input:radio').on("change", updateChoices);
function updateChoices(e) {
// Show the appropriate list based on the name of the radio button that was changed
$('select[name="' + this.name + '"]').show();
// Reset any previously selected option in the list back to the default
$('select[name="' + this.name + '"]').val($('select[name="' + this.name + '"] option:first').val());
// Update the <option> elements in the corresponding <select>
$('select[name="' + this.name + '"] option').each(function(index,element){
// If the option has the same class as the radio button that was changed...
if($(element).hasClass(e.target.value)){
$(element).show(); // Show the option
} else {
$(element).hide(); // Hide the option
}
});
}
</script>
</body>
</html>
It's a common global variable conflict issue. You can (must) wrap them all to self-executing function, which will keep all declared variables inside its own.
(conflict):
var test = $('#btn-1').text();
$('#btn-1').on('click', function(){ console.log( test ); });
var test = $('#btn-2').text();
$('#btn-2').on('click', function(){ console.log( test ); });
var test = $('#btn-3').text();
$('#btn-3').on('click', function(){ console.log( test ); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn-1">111</button>
<button id="btn-2">222</button>
<button id="btn-3">333</button>
(no conflict):
(function(){
var test = $('#btn-1').text();
$('#btn-1').on('click', function(){ console.log( test ); });
})();
(function(){
var test = $('#btn-2').text();
$('#btn-2').on('click', function(){ console.log( test ); });
})();
(function(){
var test = $('#btn-3').text();
$('#btn-3').on('click', function(){ console.log( test ); });
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn-1">111</button>
<button id="btn-2">222</button>
<button id="btn-3">333</button>
But in your case, at least would be better to run everything in loop (or adding a general class for all elements and loop with $('.class').each(function(){/*...*/})):
for( var i = 2; i < 5; i++ ){
doStuff( i );
}
function doStuff( index ){
var options = $("#DropDownList" + index).html();
$('#DropDownList' + index + ' :not([value^="Dr"])').remove();
$('input:radio').change(function(e) {
var text = $(this).val();
$("#DropDownList" + index).html(options);
$('#DropDownList' + index + ' :not([value^="' + text.substr(0, 3) + '"])').remove();
});
}
Here was used the function as well, to "keep" variables inside.
Related
Check radio button only if and when a dropdown list element is selected
I have this jquery to check a radio button on page load:
$('input[value="modelos"]').attr('checked',true);
And then I have a dropdown list:
<select id="talents_meta_category" name="talents_meta_category">
<option value="tab_1495127126289">Modelos</option>
<option value="tab_1495132259463">Música</option>
</select>
How can I have input[value="modelos"] checked only if and when <option value="tab_1495127126289">Modelos</option> is selected?
You need on change condition with if like this :
$("select#talents_meta_category").change(function () {
if ($(this).val() === "tab_1495127126289") {
$('input[value="modelos"]').attr('checked',true);
}else{
$('input[value="modelos"]').attr('checked',false);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="talents_meta_category" name="talents_meta_category">
<option value="">Please Select</option>
<option value="tab_1495127126289">Modelos</option>
<option value="tab_1495132259463">Música</option>
</select>
</br>
<input type="checkbox" name="modelos 1" value="modelos"> modelos 1<br>
<input type="checkbox" name="modelos 2" value="modelos"> modelos 2<br>
<input type="checkbox" name="modelos 3" value="modelos"> modelos 3<br>
Checkbox dynamically change based on condition (select option value)
You can try this, but I had to put in a blank option into the menu, however if that's unacceptable let me know and I'll do something else.
$("select#talents_meta_category").change(function () {
if ($(this).val() === "tab_1495127126289") {
$('input[value="modelos"]').attr('checked',true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select id="talents_meta_category" name="talents_meta_category">
<option></option>
<option value="tab_1495127126289">Modelos</option>
<option value="tab_1495132259463">Música</option>
</select>
<input type="radio" value="modelos">
You can check whether a option by testing the value attribute of the select
$(function(){
if($('#talents_meta_category').val()){
$('input[name="favorites"][value="modelos2"]').attr('checked',true);
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="talents_meta_category" name="talents_meta_category">
<option value=""></option>
<option value="tab_1495127126289">Modelos</option>
<option value="tab_1495132259463" selected>Música</option>
</select>
<label for="modelos"><input type="radio" name="favorites" value="modelos"></label>
<label for="modelos"><input type="radio" name="favorites" value="modelos2"></label>
You can use onchange function.
$("#talents_meta_category").on('change',function(){
let value = $(this).children("option:selected").val();
if(value=="tab_1495127126289"){
$('input[value="modelos"]').attr('checked',true);
}else{
$('input[value="modelos"]').attr('checked',false);
}
});
Something like this should do the trick:
// Your check the radio on page load
$('input[value="modelos"]').attr('checked', true);
// Check if `modelos` is selected
if ($('input[value="modelos"]').prop('checked')) {
// Add the `selected` attribute to the <option />
$('option[value="tab_1495127126289"]').attr('selected', true);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='radio' value='modelos' />
<select id="talents_meta_category" name="talents_meta_category">
<option value="tab_1495127126289">Modelos</option>
<option value="tab_1495132259463">Música</option>
</select>
Hope this helps,
You can do it many different ways, here is just one....
var checkMe = 'tab_1495127126289';
$(function(){
$('input[name=talents_meta_category][value=' + checkMe + ']').prop('checked',true)
});
Javascript dynamic select, using arrays
I have the following code from a very old website. It's from the back end of a system which is used to sell activity holidays, and it only works in IE when Compatibility Mode is engaged. (Hence the meta tag on line 3).
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=6" />
</head>
<body bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function BuildActivityTypeSubTypeDropDown(ActivityTypeId) {
var ActivitySubTypeId = 0
var arrActivityTypeId = new Array(2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,35,36,37,38,39,40,41,42,45,46,47,48);
var arrActivityTypeName = new Array('Adventure','Sport','Culture','Personal Development','Fitness','Wellbeing','Ski','Cycling','Surfing','Tennis','Fishing','Golf','Walking','Languages','Music','Poker','Bridge','Football','Photography','Cooking','Painting','Airborne','Wine','Cricket','Scrabble','Chess','Mountains','Diving','Kayaking','Windsurfing','Sailing','Riding','Singing','Farming','Creative Writing','Croquet','Drama','Bowls','Motorcycle','Wildlife','Incentive','Spice','Comedy','Boot Camp');
var arrActivitySubTypeId = new Array(190,16,77,12,32,30,99,104,14,112,18,28,34,98,89,97,15,17,170,78,35,74,196,13,109,6,108,68,21,207,95,37,11,110,191,111,90,40,63,43,85,59,65,69,120,169,200,189,202,173,172,216,175,178,136,199,198,176,171,195,197,179,192,168,194,177,205,180,100,181,103,101,162,102,114,119,115,118,116,117,121,122,124,123,186,125,187,126,152,153,131,127,128,130,129,135,133,201,183,132,134,137,138,140,182,139,141,142,144,164,145,143,146,147,148,149,150,151,154,155,156,209,157,213,208,214,211,212,210,158,184,159,160,167,161,163,165,166,203,204,215,193);
var arrActivitySubTypeName = new Array('Canyoning','Multi-Activity','Golf','Archaeology','Cooking','Sightseeing','Wine','Outdoor Survival skills','Public Speaking','Aerobics','Bachata','Belrobics','Bollywood Fitness','Booiaka','Boot Camp','Boxfit','Drums Alive','Fitness','Ginastica Natural','Insanity','Kettlebell Workout','Masala Bhangra','Parkour','Personal Training','Pilates','Retreat','Running','Spa','Step Aerobics','Weight Loss','Yoga','Zumba','Nutrition','Pilates','Spa','Weight-Loss','Yoga','Alpine and Downhill','Cross-Country','Snowboarding','Cycle Touring','Mountain Biking','Road Cycling','Surfing','Tennis','Big Game','Carp','Fly','Salmon','Trout','Golf','Hiking','Rambling','Walking','French','German','Italian','Spanish','Classical Concerts','Groups - live concerts','Learn to play','stud','Texas Hold \'em','Bridge','Football','Photography','Baking','Breadmaking','Cooking','Painting','Ballooning','Gliding','Hang-Gliding','Light Aircraft','Para-Gliding','Wine','Cricket','Scrabble','Chess','Climbing and mountaineering','Hiking','Diving','Kayaking','Windsurfing','Bareboat Charter','Big Boat','Cabin Charter','Dinghy','Expedition Adventure Sailing','Flotilla Sailing Holidays','RYA Training Holidays','Skippered Charter','Horseriding','Choral','Urban Farming','Writing','Croquet','Acting and Drama','Bowls','Track days','Birdwatching','Various','Various','Carry on Comedy','Boot Camp');
var arrActivitySubTypeActivityTypeId = new Array(2,2,3,4,4,4,4,5,5,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,7,7,7,7,7,8,8,8,9,9,9,10,11,12,12,12,12,12,13,14,14,14,15,15,15,15,16,16,16,17,17,18,19,20,21,21,21,22,23,23,23,23,23,24,25,26,27,28,28,29,30,31,32,32,32,32,32,32,32,32,33,35,36,37,38,39,40,41,42,45,46,47,48);
var ActivitySubTypeDropDown = document.getElementById('ActivitySubTypeId')
var ActivitySubTypeDropDownOption
ActivitySubTypeDropDown.options.length = 0;
ActivitySubTypeDropDownOption = document.createElement("OPTION");
ActivitySubTypeDropDownOption.value = '';
ActivitySubTypeDropDownOption.text = '';
ActivitySubTypeDropDown.add(ActivitySubTypeDropDownOption);
for(var i = 0; i < arrActivitySubTypeId.length; ++i) {
if (arrActivitySubTypeActivityTypeId[i] == ActivityTypeId) {
ActivitySubTypeDropDownOption = document.createElement("OPTION");
ActivitySubTypeDropDownOption.value = arrActivitySubTypeId[i];
ActivitySubTypeDropDownOption.text = arrActivitySubTypeName[i];
ActivitySubTypeDropDown.add(ActivitySubTypeDropDownOption);
if (arrActivitySubTypeId[i] == ActivitySubTypeId) {
ActivitySubTypeDropDownOption.selected = true;
}
}
}
}
// End -->
</script>
<center>
<form name="frmBookings">
Activity Category<br>
<select id="ActivityTypeDropDown" name="ActivityTypeId" style="width: 100px" OnChange="BuildActivityTypeSubTypeDropDown(this.value)">
<option value="">Select All</option>
<option value=""></option>
<option value="2" >Adventure</option>
<option value="23" >Airborne</option>
<option value="48" >Boot Camp</option>
<option value="40" >Bowls</option>
<option value="18" >Bridge</option>
<option value="27" >Chess</option>
<option value="47" >Comedy</option>
<option value="21" >Cooking</option>
<option value="37" >Creative Writing</option>
<option value="25" >Cricket</option>
<option value="38" >Croquet</option>
<option value="4" >Culture</option>
<option value="9" >Cycling</option>
<option value="29" >Diving</option>
<option value="39" >Drama</option>
<option value="36" >Farming</option>
<option value="12" >Fishing</option>
<option value="6" >Fitness</option>
<option value="19" >Football</option>
<option value="13" >Golf</option>
<option value="45" >Incentive</option>
<option value="30" >Kayaking</option>
<option value="15" >Languages</option>
<option value="41" >Motorcycle</option>
<option value="28" >Mountains</option>
<option value="16" >Music</option>
<option value="22" >Painting</option>
<option value="5" >Personal Development</option>
<option value="20" >Photography</option>
<option value="17" >Poker</option>
<option value="33" >Riding</option>
<option value="32" >Sailing</option>
<option value="26" >Scrabble</option>
<option value="35" >Singing</option>
<option value="8" selected>Ski</option>
<option value="46" >Spice</option>
<option value="3" >Sport</option>
<option value="10" >Surfing</option>
<option value="11" >Tennis</option>
<option value="14" >Walking</option>
<option value="7" >Wellbeing</option>
<option value="42" >Wildlife</option>
<option value="31" >Windsurfing</option>
<option value="24" >Wine</option>
</select>
<br><br>
Activity Type<br>
<select id="ActivitySubTypeDropDown" name="ActivitySubTypeId" style="width: 100px">
</select>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
BuildActivityTypeSubTypeDropDown(8);
// End -->
</script>
<br><br>
<input type="submit" value="Search Bookings" class="button">
</form>
</body>
</html>
I'm looking for the most minimal changes necessary to get it to work in current desktop versions of Edge, Firefox and Chrome.
I should add that this is HTML output. The contents of the arrays on lines 11 to 15 are pulled from a database with server side code, so if possible I'm looking for an answer which continues to use these arrays.
When I remove the compatibility meta tag I get the following error alert for line 20:
"Unable to get property "options" of undefined or null reference".
Can anyone help?
There is no element with ID ActivitySubTypeId.
You should change
var ActivitySubTypeDropDown = document.getElementById('ActivitySubTypeId')
to
var ActivitySubTypeDropDown = document.getElementById('ActivitySubTypeDropDown')
Adding more information to #Titus' answer: From MS documentation you can see that In IE7 Standards mode and previous modes, this method performs a case-insensitive match on both the ID and NAME attributes, which might produce unexpected results. For more information, see Defining Document Compatibility. So forcing the compatibility mode that code works because of the name attribute, but any modern browser checks just the id attribute's value, as expected.
You should need to change this, it will also give the error in other browsers
var ActivitySubTypeDropDown = document.getElementById('ActivitySubTypeId')
to
var ActivitySubTypeDropDown = document.getElementById('ActivitySubTypeDropDown');
if choose this option and this option change to 3 option
I have a table rows (this is not real, this is only example for simple it):
id, cat, company, device.
for example some recordes:
1, computer, samsung, ativ
2, computer, lg, blabla
3, phones, samsung, s6
4, phones, sony, z5
I want that if I choose category (computer for example) this will open only the company that they have computer, In addition, when the user select the second select, this will give the option that remain.
I found here the answer for the first select but for the second I did find.
I dont want to do "if ..., if ..." because this is need to be from the database and automatic.
This is the example that i did:
http://jsfiddle.net/e464etcq/
HTML:
<select class="form-control" id="type" name="type">
<option value="">choose</option>
<option value="1">phones</option>
<option value="2">computers</option>
</select>
<select class="form-control" id="reason" name="reason">
<option value="">choose</option>
<option value="1" class="1">samsung</option>
<option value="2" class="1">lg</option>
<option value="3" class="2">samsung</option>
<option value="3" class="2">sony</option>
</select>
<input type="text" id="billing">
JQUERY:
jQuery(function($) {
var backupShipStates = $("#reason").html();
$("#type").change(function() {
var country = $(this).val();
var options = $(backupShipStates).filter(function() {
return !$(this).attr("class") || $(this).attr("class") == country; });
$("#reason").html(options);
});
});
do you have any suggition how to do it?
Thank you,
Omry.
If I've understand you, you could add a new change event to handle when the second select is changed.
So your code would be:
HTML
<select class="form-control" id="type" name="type">
<option value="">בחר</option>
<option value="1">phones</option>
<option value="2">computers</option>
</select>
<select class="form-control" id="reason" name="reason">
<option value="">choose</option>
<option value="1" class="1">samsung</option>
<option value="2" class="1">lg</option>
<option value="3" class="2">samsung</option>
<option value="3" class="2">sony</option>
</select>
<select class="form-control" id="third" name="third">
<option value="">choose</option>
<option value="1" class="1">Option3.1</option>
<option value="2" class="1">Option3.2</option>
<option value="3" class="2">Option3.3</option>
<option value="3" class="2">Option3.4</option>
</select>
<input type="text" id="billing">
jQuery
jQuery(function($) {
var backupShipStates = $("#reason").html();
var backupOption3 = $("#third").html();
$("#type").change(function() {
var country = $(this).val();
var options = $(backupShipStates).filter(function() {
return !$(this).attr("class") || $(this).attr("class") == country; });
$("#reason").html(options);
});
$("#reason").change(function(){
var reason = $(this).val();
var options = $(backupOption3).filter(function() {
return !$(this).attr("class") || $(this).attr("class") == reason; });
$("#third").html(options);
});
});
Here is not necessary PHP.
2 Select options Combine values and link
I need to combine two values and link to the selected site.
ex. select> Google> select>Translate
join two values
T2 [translate] T1 [.google.com] = translate.google.com Go
JS
<script>
function goToNewPage() {
var g=document.getElementById('target').value;
{
window.location.href = document.getElementById('target').value;
}
}
</script>
HTML
<form name="dropdown">
<select name="selected" id="target2" >
<option selected>Select...</option>
<option value=".google.com/">Google</option>
<option value=".search.com/">Bing</option>
</select>
<select name="selected" id="target" >
<option selected>Select...</option>
<option value="http://translate">Translate</option>
<option value="http://translate/">Translator</option>
</select>
<input type="button" value="Go" onclick="goToNewPage(document.dropdown.selected)">
</form>
Try this:
window.location.href = document.getElementById('target').value + document.getElementById('target2').value
Javascript disable select box on another select box option
I have two select dropdown lists:
<select name="internal_message">
<option value="yes">Yes</option>
<option value="" selected="selected">No</option>
</select>
and
<select name="internal_message_agent">
<option value="">Choose</option>.... etc
</select>
I have tried:
<select name="internal_message">
<option value="yes" onClick="document.getElementById('internal_message_agent').disabled=!this.selected;">Yes</option>
<option value="" selected="selected">No</option>
</select>
but it doesnt work - how can i get it working to disable the internal_message_agent select element to be disabled when the internal_message selected value is "No" and enable it when the selected option is "Yes"
Add an ID to each select and use jquery to disable it like so:
$('#box1').on('change', function(){
if($(this).val()==='no'){
$('#box2').attr('disabled', 'disabled');
}else{
$('#box2').attr('disabled', false);
}
});
http://jsfiddle.net/3MCaG/1/
Here's what it would look like with Javascript and HTML.
<!DOCTYPE html>
<html>
<head>
</head>
<script>
function validate(){
var b1 = document.getElementById("box1");
var f = b1.options[b1.selectedIndex].value;
var b2 = document.getElementById("box2");
if(f == "no"){
b2.disabled="disabled";
}
else{
b2.disabled="";
}
}
</script>
<select id="box1" onchange="validate()">
<option id="yes" value="yes">Yes</option>
<option id="no" value="no" selected="selected">No</option>
</select>
<select id="box2" disabled>
<option></option>
<option value="">Choose</option>
</select>
</html>