3 jQuery Scripts Not working together in HTML page - 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?
It works now but one drop-down menu at a time how can I make them work together
(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 src = "https://code.jquery.com/jquery-latest.min.js"></script>
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>


Your issue here is that your radio button change events are overlapping each other so they don't have scope they just override each other, see the changes below where the radio input are now wrapped in a container and each event is scoped separately.
it's worth noting that using scope around each section of dropdown and radio button set you could refactor your code into a single function can handle all events.
(function() {
var options = $("#DropDownList2").html();
$('#DropDownList2 :not([value^="Fac"])').remove();
$('.group1 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();
$('.group2 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();
$('.group3 input:radio').change(function(e) {
var text = $(this).val();
$("#DropDownList4").html(options);
$('#DropDownList4 :not([value^="' + text.substr(0, 3) + '"])').remove();
});
})();
<script src = "https://code.jquery.com/jquery-latest.min.js"></script>
Availabe Restaurants:
<br> Burgers:
<div class="group1">
<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>
</div>
<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:
<div class="group2">
<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>
</div>
<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>
<div class="group3">
<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>
</div>
<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>

Related

check a checkbox when dropdown changes for multiple checkbox/select combos

I want to be able to check a checkbox when a dropdown changes. There will be multiple checkbox/dropdown combos which are dynamically created from mySQL based on other selections. I've figured out how to do it for 1 combo, but not for multiple. Will I have to created a function for each combo? Is there a way in jQuery?
Here's my working code for 1 combo. What do I need to do to have multiple checkbox/dropdown combos?
<!DOCTYPE html>
<html>
<body>
<label><input type='checkbox' name='location[]' id='location_FF' value='FF' /> Front Flat </label>
<select name='addWhat[FF]' id='addWhat_FF' onChange='myCheckbox(this.value)'>
<option value=''> -</option>
<option value='Logo'>Logo</option>
<option value='Nam'>Name</option>
<option value='Num'>Number</option>
<option value='Mon'>Monogram</option>
</select>
<script>
function myCheckbox(val) {
var x = document.getElementById("location_FF");
if (val == "") {
x.checked = false;
} else {
x.checked = true;
}
}
</script>
</body>
</html>

You could do with jquery.closest() function call
$(document).on('change', '.combo select', function() {
let parent = $(this).closest('.combo');
parent.find('input[type=checkbox]').prop('checked', !!$(this).val().trim())
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="combo">
<label><input type='checkbox' name='location[]' value='FF' /> Front Flat </label>
<select name='addWhat[FF]'>
<option value=''> -</option>
<option value='Logo'>Logo</option>
<option value='Nam'>Name</option>
<option value='Num'>Number</option>
<option value='Mon'>Monogram</option>
</select>
</div>
<div class="combo">
<label><input type='checkbox' name='location[]' value='FF' /> Front Flat </label>
<select name='addWhat[FF]' >
<option value=''> -</option>
<option value='Logo'>Logo</option>
<option value='Nam'>Name</option>
<option value='Num'>Number</option>
<option value='Mon'>Monogram</option>
</select>
</div>
<div class="combo">
<label><input type='checkbox' name='location[]' value='FF' /> Front Flat </label>
<select name='addWhat[FF]'>
<option value=''> -</option>
<option value='Logo'>Logo</option>
<option value='Nam'>Name</option>
<option value='Num'>Number</option>
<option value='Mon'>Monogram</option>
</select>
</div>

I think your output structure is not right, you could return your html much better, but I give my solution based on your current output:
$('.Selects').change(function() {
$(this).prev('label').children('input[type="checkbox"]').attr('checked', true)
});
$('.Selects').change(function() {
$(this).prev('label').children('input[type="checkbox"]').attr('checked', true)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label><input type='checkbox' name='location[]' id='location_FF' class="CheckBoxes" value='FF' /> Front Flat </label>
<select name='addWhat[FF]' id='addWhat_FF' class="Selects">
<option value=''> -</option>
<option value='Logo'>Logo</option>
<option value='Nam'>Name</option>
<option value='Num'>Number</option>
<option value='Mon'>Monogram</option>
</select>
<label><input type='checkbox' name='location[]' id='location_FF' class="CheckBoxes" value='FF' /> Front Flat </label>
<select name='addWhat[FF]' id='addWhat_FF' class="Selects">
<option value=''> -</option>
<option value='Logo'>Logo</option>
<option value='Nam'>Name</option>
<option value='Num'>Number</option>
<option value='Mon'>Monogram</option>
</select>
<label><input type='checkbox' name='location[]' id='location_FF' class="CheckBoxes" value='FF' /> Front Flat </label>
<select name='addWhat[FF]' id='addWhat_FF' class="Selects">
<option value=''> -</option>
<option value='Logo'>Logo</option>
<option value='Nam'>Name</option>
<option value='Num'>Number</option>
<option value='Mon'>Monogram</option>
</select>
And note that, do not use duplicate ID !
location_FF
Improved version:
$('.Selective select').change(function() {
$(this).parent().find('input[type="checkbox"]').attr('checked', true)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="Selective">
<label><input type='checkbox' name='location[]' value='FF' /> Front Flat </label>
<select name='addWhat[FF]'>
<option value=''> -</option>
<option value='Logo'>Logo</option>
<option value='Nam'>Name</option>
<option value='Num'>Number</option>
<option value='Mon'>Monogram</option>
</select>
</div>
<div class="Selective">
<label><input type='checkbox' name='location[]' value='FF' /> Front Flat </label>
<select name='addWhat[FF]'>
<option value=''> -</option>
<option value='Logo'>Logo</option>
<option value='Nam'>Name</option>
<option value='Num'>Number</option>
<option value='Mon'>Monogram</option>
</select>
</div>
<div class="Selective">
<label><input type='checkbox' name='location[]' value='FF' /> Front Flat </label>
<select name='addWhat[FF]'>
<option value=''> -</option>
<option value='Logo'>Logo</option>
<option value='Nam'>Name</option>
<option value='Num'>Number</option>
<option value='Mon'>Monogram</option>
</select>
</div>

Here's a vanilla JS solution if you're interested.
Edit: I noticed the other solutions unchecked the box if you clicked on its label. So I added a preventDefault() to stop that.
var drops = document.querySelectorAll(".dropdown");
for (var i = 0; i < drops.length; i++) {
drops[i].addEventListener('change', (e) => {
var box = e.target.previousElementSibling.firstElementChild;
if (e.target.options[e.target.selectedIndex].value == '') {
box.checked = false;
} else {
box.checked = true;
}
});
}
var labels = document.querySelectorAll("label");
for (var i = 0; i < labels.length; i++) {
labels[i].addEventListener('click', (e) => {
e.preventDefault();
});
}
<label><input type='checkbox' name='location[]' class='location' id='location_FF' value='FF' /> Front Flat </label>
<select name='addWhat[FF]' class="dropdown" id='addWhat_FF'>
<option value=''> -</option>
<option value='Logo'>Logo</option>
<option value='Nam'>Name</option>
<option value='Num'>Number</option>
<option value='Mon'>Monogram</option>
</select>
<br>
<label><input type='checkbox' name='location[]' class='location' id='location_BR' value='BR' /> Bottom Round </label>
<select name='addWhat[BF]' class="dropdown" id='addWhat_BR'>
<option value=''> -</option>
<option value='Logo'>Logo</option>
<option value='Nam'>Name</option>
<option value='Num'>Number</option>
<option value='Mon'>Monogram</option>
</select>

How can I use jQuery in html to display the drop down menu correctly

hi I am new to jQuery and I am trying to implement it to an HTML code but it doesn't work
it works here https://jsfiddle.net/6trb0whz/
but it doesn't work here
can someone help me solve this, please
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
var options = $("#DropDownList2").html();
$('#DropDownList2 :not([value^="App"])').remove();
$('input:radio').change(function(e) {
var text = $(this).val();
$("#DropDownList2").html(options);
$('#DropDownList2 :not([value^="' + text.substr(0, 3) + '"])').remove();
});
</script>
<input type="radio" name="test" value="Orange" /> Burger Garage
<input type="radio" name="test" value="Burger" /> Hardee's
<input type="radio" name="test" checked="checked" value="Apple" /> Burger Factory & More
<br>
<select ID="DropDownList2" Height="18px" Width="187px">
<option Value="Apple_Style_1">Turbo Chicken</option>
<option Value="Apple_Style_2">Twin Turbo Chicken</option>
<option Value="Apple_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="Orange_Style_1">Original Burger</option>
<option Value="Orange_Style_2">Twin Turbo Chicken</option>
<option Value="Orange_Style_3">Shuwa Burger</option>
</select>
</body>
</html>
UPDATE
It works now for one time then disappears after clicking on the third radio button
you can try it in here https://jsfiddle.net/ujvr082w/
This is the code
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="radio" name="test" value="Orange" /> Burger Garage
<input type="radio" name="test" value="Burger" /> Hardee's
<input type="radio" name="test" checked="checked" value="Apple" /> Burger Factory & More
<br>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
var options = $("#DropDownList2").html();
$('#DropDownList2 :not([value^="App"])').remove();
$('input:radio').change(function(e) {
var text = $(this).val();
$("#DropDownList2").html(options);
$('#DropDownList2 :not([value^="' + text.substr(0, 3) + '"])').remove();});
</script>
<select ID="DropDownList2" Height="18px" Width="187px">
<option Value="Apple_Style_1">Turbo Chicken</option>
<option Value="Apple_Style_2">Twin Turbo Chicken</option>
<option Value="Apple_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="Orange_Style_1">Original Burger</option>
<option Value="Orange_Style_2">Twin Turbo Chicken</option>
<option Value="Orange_Style_3">Shuwa Burger</option>
</select>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<label><input type="radio" name="test" value="Orange" /> Burger Garage</label>
<label><input type="radio" name="test" value="Burger" /> Hardee's</label>
<label> <input type="radio" name="test" checked="checked" value="Apple" /> Burger Factory & More</label>
<br>
<select ID="DropDownList2" Height="18px" Width="187px">
<option Value="Apple_Style_1">Turbo Chicken</option>
<option Value="Apple_Style_2">Twin Turbo Chicken</option>
<option Value="Apple_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="Orange_Style_1">Original Burger</option>
<option Value="Orange_Style_2">Twin Turbo Chicken</option>
<option Value="Orange_Style_3">Shuwa Burger</option>
</select>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
var options = $("#DropDownList2").html();
$('#DropDownList2 :not([value^="App"])').remove();
$('input:radio').change(function(e) {
var text = $(this).val();
$("#DropDownList2").html(options);
$('#DropDownList2 :not([value^="' + text.substr(0, 3) + '"])').remove();});
</script>
</body>
</html>
You can put your script after creationg your html.
If you put before html in dropdown menu It take all value in dropdown menu.

Javascript Selectbox to fill other selectbox regarding option order

I have 2 selectboxes. What I want to do is autoselect the second selectbox by selecting a value from selectbox1. I can auto populate the values but what I need here is to select option by order regardless of value.
If I select option1 on selectbox1 with value=A, then it should select option1 on selectbox2 with value="1" according to below
<div class="control-group">
<label class="control-label">First Select</label>
<div class="controls">
<select name="firstSELECT" class="select validate[required]">
<option value="A" class="opm">12345</option>
<option value="B" class="opm">23456</option>
<option value="C" class="opm">34567</option>
<option value="D" class="opm">45678</option>
<option value="E" class="opm">56789</option>
</select>
</div>
<label class="control-label">Second Select</label>
<div class="controls">
<select name="secondSELECT" class="select validate[required]">
<option value="1" class="opm">ABCDE</option>
<option value="2" class="opm">BCDEF</option>
<option value="3" class="opm">CDEFG</option>
<option value="4" class="opm">DEFGH</option>
<option value="5" class="opm">EFGHI</option>
</select>
</div>
</div>
I tried a method like javascript using select box to fill other select box but since I need to select according the order of option, not value; I wasn't able to do it since I am very new with Javascript.
Thanks in advance.

This works:
function update() {
var firstSelect = document.getElementsByName("firstSELECT")[0];
var secondSelect = document.getElementsByName("secondSELECT")[0];
var optN;
for (i=0;i<firstSelect.children.length;i++) {
if (firstSelect.children[i].selected) {
secondSelect.children[i].selected = "1";
break;
}
}
}
<div class="control-group">
<label class="control-label">First Select</label>
<div class="controls">
<select name="firstSELECT" class="select validate[required]" oninput="update()">
<option value="A" class="opm">12345</option>
<option value="B" class="opm">23456</option>
<option value="C" class="opm">34567</option>
<option value="D" class="opm">45678</option>
<option value="E" class="opm">56789</option>
</select>
</div>
<label class="control-label">Second Select</label>
<div class="controls">
<select name="secondSELECT" class="select validate[required]">
<option value="1" class="opm">ABCDE</option>
<option value="2" class="opm">BCDEF</option>
<option value="3" class="opm">CDEFG</option>
<option value="4" class="opm">DEFGH</option>
<option value="5" class="opm">EFGHI</option>
</select>
</div>
</div>
We loop trough all the <option> elements in the first <select>, and when we find the selected, we select the <option> with the same index in the second <select>.

Try this:
<div class="control-group">
<label class="control-label">First Select</label>
<div class="controls">
<select name="firstSELECT" id="a" class="select validate[required]" onchange="document.getElementById('b').value=document.getElementById('a').value">
<option value="A" class="opm">12345</option>
<option value="B" class="opm">23456</option>
<option value="C" class="opm">34567</option>
<option value="D" class="opm">45678</option>
<option value="E" class="opm">56789</option>
</select>
</div>
<label class="control-label">Second Select</label>
<div class="controls">
<select name="secondSELECT" id="b" class="select validate[required]">
<option value="A" class="opm">ABCDE</option>
<option value="B" class="opm">BCDEF</option>
<option value="C" class="opm">CDEFG</option>
<option value="D" class="opm">DEFGH</option>
<option value="E" class="opm">EFGHI</option>
</select>
</div>
</div>

Here's the jQuery way of doing it:
$(".selectFirst").change(function(e) {
var selectedOption = $("option:selected", this);
var idx = $(this).children().index(selectedOption)
var secChildIdx = $(".selectSecond").children()[idx];
$(".selectSecond").find(":selected").removeAttr('selected');
$(secChildIdx).attr("selected", "selected");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="control-group">
<label class="control-label">First Select</label>
<div class="controls">
<select name="firstSELECT" class="selectFirst select validate[required]">
<option value="A" class="opm">12345</option>
<option value="B" class="opm">23456</option>
<option value="C" class="opm">34567</option>
<option value="D" class="opm">45678</option>
<option value="E" class="opm">56789</option>
</select>
</div>
<label class="control-label">Second Select</label>
<div class="controls">
<select name="secondSELECT" class="selectSecond select validate[required]">
<option value="1" class="opm">ABCDE</option>
<option value="2" class="opm">BCDEF</option>
<option value="3" class="opm">CDEFG</option>
<option value="4" class="opm">DEFGH</option>
<option value="5" class="opm">EFGHI</option>
</select>
</div>
</div>

hide dropdown option on change of another dropdown option

I have tried this, but not working fine. HTML:
<div>
<select id="color" name="color" onchange="myFunction()">
<option value=""> choose options </option>
<option value="1">AB</option>
<option value="2">ABC</option>
<option value="3">ABCD</option>
</select>
<select id="size" name="size" >
<option value=""> choose options </option>
<option value="3" class="27">Apple </option>
<option value="2" class="26">Orange</option>
<option value="2" class="26">Orange</option>
<option value="2" class="26">Orange</option>
<option value="3" class="28">Grapes</option>
</select>
</div>
SCRIPT:
function myFunction()
{
$variable=$("#size").html();
$("#size").html($variable);
var val=$("#color").find(":selected").val();
$("#size option[value!="+val+"]").remove();
}
in place of .remove() I tried .hide() which seems to be not working. Could anyone help me out with this?

You should show all options before hide.
function myFunction()
{
$variable=$("#size").html();
$("#size").html($variable);
var val=$("#color").find(":selected").val();
$("#size option").show();
$("#size option[value!="+val+"]").hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<select id="color" name="color" onchange="myFunction()">
<option value=""> choose options </option>
<option value="1">AB</option>
<option value="2">ABC</option>
<option value="3">ABCD</option>
</select>
<select id="size" name="size" >
<option value=""> choose options </option>
<option value="3" class="27">Apple </option>
<option value="2" class="26">Orange</option>
<option value="2" class="26">Orange</option>
<option value="2" class="26">Orange</option>
<option value="3" class="28">Grapes</option>
</select>
</div>

You can make a mix of JS and CSS.
So we "reset" the size select, by removing all the disabled and also the selected.
Something like this:
$(document).ready(function () {
var colors = $('#color'),
size = $('#size');
colors.change(function () {
var val = $(this).find(":selected").val();
size.find('option').removeAttr('disabled');
size.find('option:selected').removeAttr('selected');
size.find("option[value!=" + val + "]").attr('disabled', 'disabled');
})
})
option:disabled {
display: none;
}
option:first-child {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<select id="color" name="color">
<option value="">choose options</option>
<option value="1">AB</option>
<option value="2">ABC</option>
<option value="3">ABCD</option>
</select>
<select id="size" name="size">
<option value="">choose options</option>
<option value="3" class="27">Apple</option>
<option value="2" class="26">Orange</option>
<option value="2" class="26">Orange</option>
<option value="2" class="26">Orange</option>
<option value="3" class="28">Grapes</option>
</select>
</div>
Edit 1:
Using data-group instead of class or value
$(document).ready(function () {
var colors = $('#color'),
size = $('#size');
colors.change(function () {
var val = $(this).find(":selected").attr('data-group');
size.find('option').removeAttr('disabled');
size.find('option:selected').removeAttr('selected');
size.find("option[data-group!=" + val + "]").attr('disabled', 'disabled');
})
})
option:disabled {
display: none;
}
option:first-child {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<select id="color" name="color">
<option value="">choose options</option>
<option value="1" data-group="1">AB</option>
<option value="2" data-group="2">ABC</option>
<option value="3" data-group="3">ABCD</option>
</select>
<select id="size" name="size">
<option value="">choose options</option>
<option value="3" class="27" data-group="3">Apple</option>
<option value="2" class="26" data-group="2">Orange</option>
<option value="2" class="26" data-group="2">Orange</option>
<option value="2" class="26" data-group="2">Orange</option>
<option value="3" class="28" data-group="3">Grapes</option>
</select>
</div>

Appending Checkbox values to Input Textbox (Jquery)

I have been making a product configurator for the past month and received some awesome help from Stackoverflow. I come back asking for some help. Before proceeding, I have Google'd for answers, looked on Stackoverflow, and tried messing around with the code myself. I am new to coding as well so I am aware that the code is not perfect by any means.
Anyways, my code works by taking an option from the dropdown or checkbox and places its value in an input textbox at the end. What I am trying to achieve is that in the "Options" section (which are all checkboxes), I would like the value to appear in the input textbox named "completeText" when checked and disappear when unchecked. I found some code that worked great, but if I made all of the dropdown selections before "Options" and then checked a checkbox, it would clear out the entire box except for that checkbox's value. I need the checkbox value to append to the other dropdown selections. The part number at the end should be all of the values appended to each other, separated by an "-". Again, I have tried a ton of different ways to achieve this and so far have been unsuccessful. Any direction or help would be marvelous! Thank you so much and my HTML/JS is below for reference if someone wants to help (WARNING LONG CODE):
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>‌​
<script src="http://www.flexotherm.net/templates/yoo_corona/js/samplepicture.js"> </script>
<script src="http://www.flexotherm.net/templates/yoo_corona/js/options.js"> </script>
<script src="http://www.flexotherm.net/templates/yoo_corona/js/sampleso.js"></script>
</head>
<br>
<div style="width: 900px; float: left; margin-left: 30px;"><h1><font face="bebas neue" size="15">Design your own</font></h1>
<div style="width: 520px; float: left; padding-right:30px;">
<h4 style="line-height:24px;"><font face="bebas neue" size="6">Heated Sample Lines</font></h4><br><br><br><br><br><br>
<img id="image" border="5" src='http://www.flexotherm.net/images/START2' height="253px" width="450px">
</div>
<div class="choices" style="width: 300px; float: right; padding: 20px; background-color: #eee;">
<div>
<body>
<form id="example" name="example">
<b>Series Type</b><br>
<select id="series" onchange="updateText('series')">
<option value="" disabled="disabled" selected="selected">Select One</option>
<option value="HSL">Heated Sample Lines</option>
</select>
<br>
<br>
<b>Tube Material</b><br>
<select id="tube" onchange="updateText('tube')">
<option value="" disabled="disabled" selected="selected">Select One</option>
<option value="E">PTFE Teflon®</option>
<option value="P">PFA Teflon®</option>
<option value="F">FEP</option>
<option value="PE">PEEK</option>
<option value="N11">Nylon 11</option>
<option value="S">316 Stainless Steel</option>
<option value="EPS">Electropolished Stainless Steel</option>
<option value="CS">Corrugated Stainless Steel (Overbraided)</option>
<option value="ESSBT">PTFE Stainless Steel Overbraided Teflon®</option>
<option value="PSSBT">PFA Stainless Steel Overbraided Teflon®</option>
</select>
<br>
<br>
<b>Tube Size</b><br>
<select id="size" onchange="updateText('size')">
<option value="" disabled="disabled" selected="selected">Select One</option>
<option value="4/2">1/4” O.D. x 1/8” I.D. (0.635cm x 0.318cm)</option>
<option value="4/3">1/4” O.D. x 3/16” I.D. (0.635cm x 0.476cm)</option>
<option value="6/4">3/8” O.D. x 1/4” I.D. (0.953cm x 0.635cm)</option>
<option value="6/5">3/8” O.D. x 5/16” I.D. (0.953cm x 0.794cm)</option>
<option value="/8">PTFE</option>
<option value="4">1/4” O.D. x 0.035” Wall (0.635cm x 0.089cm)</option>
<option value="5">5/16” O.D. x 0.035” Wall (0.7938cm x 0.089cm)</option>
<option value="6">3/8” O.D. x 0.035” Wall (0.953cm x 0.089cm)</option>
<option value="8">1/2” O.D. x 0.035” Wall (1.27cm x 0.089cm)</option>
<option value="4C">1/4" O.D.</option>
<option value="6C">3/8" O.D.</option>
<option value="8C">1/2” O.D.</option>
</select>
<br>
<br>
<b>Voltage</b><br>
<select id="voltage" onchange="updateText('voltage')">
<option value="" disabled="disabled" selected="selected">Select One</option>
<option value="A">110 / 115 / 120 VAC</option>
<option value="B">208 VAC</option>
<option value="C">220 / 230 / 240 VAC</option>
<option value="D">440 / 450 / 460 VAC</option>
<option value="E">12 VDC</option>
<option value="F">24 VDC</option>
</select>
<br>
<br>
<b>Power Connector</b><br>
<select id="connector" onchange="updateText('connector')">
<option value="" disabled="disabled" selected="selected">Select One</option>
<option value="A">7 Pin AMP™ (Power Pins 3-5)</option>
<option value="T">Mini Twist Lock (NEMA ML2-15)</option>
<option value="T2">Mini Twist Lock (NEMA ML3-15)</option>
<option value="W">Straight-Blade (NEMA 5-15)</option>
<option value="M">Molex 3 - Pin</option>
<option value="L">LAPP</option>
<option value="N">None - Flying Leads</option>
<option value="S">Special / Custom</option>
</select>
<br>
<br>
<b>Sensor Connector</b><br>
<select id="senseconnect" onchange="updateText('senseconnect')">
<option value="" disabled="disabled" selected="selected">Select One</option>
<option value="M">Miniture</option>
<option value="S">Standard</option>
<option value="F">Flying Leads</option>
</select>
<br>
<br>
<b>Sensor Placement</b><br>
<font size="1">After selection, specify length from lead or non-lead side</font>
<select id="placement" onchange="updateText('placement')">
<option value="" disabled="disabled" selected="selected">Select One</option>
<option value="N">T/C Non-Lead Side</option>
<option value="L">Lead Side</option>
</select> <select id="length" onchange="updateText('length')">
<option value="" disabled="disabled" selected="selected">Select One</option>
<option value="1">1 ft.</option>
<option value="2">2 ft.</option>
<option value="3">3 ft.</option>
<option value="4">4 ft.</option>
<option value="5">5 ft.</option>
<option value="6">6 ft.</option>
<option value="7">7 ft.</option>
<option value="8">8 ft.</option>
<option value="9">9 ft.</option>
<option value="10">10 ft.</option> </select>
<br>
<br>
<b>Operating Temperature</b><br>
<input type="text" id="temperature" onchange="updateText('temperature')" /> <font size="2"> °F</font>
<script>
document.getElementById("temperature").onkeyup=function(){
var input=parseInt(this.value);
if(input<1 || input>9999)
alert("Value should be between 1°F - 9999°F");
return;
}
</script> <br><br>
<b>Exterior Sleeve</b><br>
<select id="sleeve" onchange="updateText('sleeve')">
<option value="" disabled="disabled" selected="selected">Select One</option>
<option value="M">Black Nylon Mesh</option>
<option value="CT">Adaptaflex Corrugated Tubing</option>
<option value="A">Aluminized Gray Silicone</option>
<option value="S">Aluminized Rust-Red Silicone</option>
<option value="S">Aluminized Black Silicone</option>
<option value="CB">Cool Blue Aluminized Silicone (Premium)</option>
<option value="AC">Armored Cover</option>
<option value="TF">Tigerflex™</option>
<option value="GF">Gatorflex™</option>
<option value="BV">Blue Vinyl</option>
</select>
<br>
<br>
<b>Port Size</b><br>
<select id="port" onchange="updateText('port')">
<option value="" disabled="disabled" selected="selected">Select One</option>
<option value="2S">1/8"</option>
<option value="4S">1/4"</option>
<option value="6S">3/8"</option>
<option value="8S">1/2"</option>
</select>
<br>
<br>
<b>Port Type</b><br>
<font size="1">Please specify type if "Custom" is selected</font><br>
<select id="porttype" onchange="updateText('porttype')">
<option value="" disabled="disabled" selected="selected">Select One</option>
<option value="TS">Tube Stubs</option>
<option value="JIC">JIC Swivels</option>
<option value="SF">Sanitary Flange</option>
<option value="C">Custom</option>
</select> <input type="text" id="custom" onchange="updateText('custom')" />
<br>
<br>
<b>Line Length</b><br>
<input type="text" id="line" onchange="updateText('line')" /><font size="2"> ft</font>
<script>
document.getElementById("line").onkeyup=function(){
var input=parseInt(this.value);
if(input<1 || input>9999)
alert("Value should be between 1 ft. - 9999 ft.");
return;
}
</script>
<br>
<br>
<b>Lead Length</b><br>
<input type="text" id="lead" onchange="updateText('lead')" /><font size="2"> ft</font>
<script>
document.getElementById("lead").onkeyup=function(){
var input=parseInt(this.value);
if(input<1 || input>9999)
alert("Value should be between 1 ft. - 9999 ft.");
return;
}
</script>
<br>
<br>
<b>Options</b>
<br>
<font size="1"> Please select all options wanted</font>
<br>
<div id="inputs">
<input type="checkbox" id="prof" class="choice" value="PR" onchange="updateText('prof')"> Profiled w/ Data</input><br>
<input type="checkbox" id="slaveboth" class="choice" value="SL" onchange="updateText('slaveboth')"> Slaved Both Ends<br>
<input type="checkbox" id="slavelead" class="choice" value="SLL" onchange="updateText('slavelead')"> Slaved Lead End<br>
<input type="checkbox" id="slavenl" class="choice" value="SLNL" onchange="updateText('slavenl')"> Slaved Non-Lead End<br>
<input type="checkbox" id="silco" class="choice" value="SN" onchange="updateText('silco')"> SilcoNert® Coating<br>
<input type="checkbox" id="dur" class="choice" value="DR" onchange="updateText('dur')"> Dursan Coating<br>
<input type="checkbox" id="ss" class="choice" value="SR" onchange="updateText('ss')"> Stainless Steel 1/16" Braided Strain Relief<br>
<input type="checkbox" id="thermo" class="choice" value="TP" onchange="updateText('thermo')"> Thermocouple Pass Through* </div><input type="text" id="thermoquant" onchange="updateText('thermoquant')" size="4" /><br>
<input type="checkbox" id="pass" class="choice" value="PP" onchange="updateText('pass')"> Power Pass Through* <br></div>
<input type="text" id="quantity" onchange="updateText('quantity')" size="4" />
<br>
<font size="1">*Specify quantity</font><br>
<br>
<hr>
<center><input type="hidden" value="" maxlength="1" size="1" id="seriesText" />
<input type="hidden" value="" maxlength="1" size="1" id="tubeText" />
<input type="hidden" value="" maxlength="1" size="1" id="sizeText" />
<input type="hidden" value="" maxlength="1" size="1" id="voltageText" />
<input type="hidden" value="" maxlength="1" size="1" id="connectorText" />
<input type="hidden" value="" maxlength="1" size="1" id="sensorText" />
<input type="hidden" value="" maxlength="1" size="1" id="placementText" />
<input type="hidden" value="" maxlength="1" size="1" id="temperatureText" />
<input type="hidden" value="" maxlength="1" size="1" id="sleeveText" />
<input type="hidden" value="" maxlength="1" size="1" id="portText" />
<input type="hidden" value="" maxlength="1" size="1" id="porttypeText" />
<input type="hidden" value="" maxlength="1" size="1" id="customText" />
<input type="hidden" value="" maxlength="1" size="1" id="lineText" />
<input type="hidden" value="" maxlength="1" size="1" id="leadText" />
<input type="hidden" value="" maxlength="1" size="1" id="thermoText" />
<input type="hidden" value="" maxlength="1" size="1" id="thermoquantText" />
<input type="hidden" value="" maxlength="1" size="1" id="passText" />
<input type="hidden" value="" maxlength="1" size="1" id="quantityText" />
<input type="text" value="" maxlength="1" size="1" id="completeText" style="font-size:7pt; height:15px; width: 298px; border:1px solid #CC0000;" /> <br> {qluetip title=[What Next?]}<div style="width: 230px; float: left;">
<div style="width: 150px; float: left; padding-top: 5px;">
<font size="5"><font face="bebas neue"><span style="color: #d80101;">Send Us</span><span style="color: #d80101;"> an</span> email</font></font></b><br><p class="tool"> <font size="1.5"> Copy your part number and click the "Email Us" button below and we will get in contact with you:</font></p>
<a class="readmore" href="mailto:mike.seacord#neptechinc.com;rick#neptechinc.com;brian.church#neptechinc.com?Subject= (CONFIG)%20Temperature%20Controller%20Part Number"><span class="readmore-1"> <span class="readmore-2">Email Us</span></span></a> </center>
</br>
<hr>
<font face="bebas neue" size="5"><span style="color: #d80101;">Give us</span><span style="color: #d80101;"> a</span> Call</font><br><p class="tool"> <font size="1.5"> Provide your custom part number and let our dedicated sales staff help you directly by calling:</br></p><font size="2"> <b>810.225.2222</b> </font> </font>
{/qluetip}
</form>
<script type="text/javascript">
function updateText(type) {
var id = type+'Text';
var endValue;
var inputValue = document.getElementById(type).value;
document.getElementById(id).value = inputValue;
endValue = document.getElementById("seriesText").value;
if(document.getElementById("tubeText").value != ""){
endValue = endValue+"-"+document.getElementById("tubeText").value;
}
if(document.getElementById("sizeText").value != ""){
endValue = endValue+"-"+document.getElementById("sizeText").value;
}
if(document.getElementById("voltageText").value != ""){
endValue = endValue+"-"+document.getElementById("voltageText").value;
}
if(document.getElementById("connectorText").value != ""){
endValue = endValue+"-"+document.getElementById("connectorText").value;
}
if(document.getElementById("sensorText").value != ""){
endValue = endValue+"-"+document.getElementById("sensorText").value;
}
if(document.getElementById("placementText").value != ""){
endValue = endValue+"-"+document.getElementById("placementText").value;
}
if(document.getElementById("temperatureText").value != ""){
endValue = endValue+"-"+document.getElementById("temperatureText").value;
}
if(document.getElementById("sleeveText").value != ""){
endValue = endValue+"-"+document.getElementById("sleeveText").value;
}
if(document.getElementById("portText").value != ""){
endValue = endValue+"-"+document.getElementById("portText").value;
}
if(document.getElementById("porttypeText").value != ""){
endValue = endValue+"-"+document.getElementById("porttypeText").value;
}
if(document.getElementById("customText").value != ""){
endValue = endValue+"-"+document.getElementById("customText").value;
}
if(document.getElementById("lineText").value != ""){
endValue = endValue+"-"+document.getElementById("lineText").value;
}
if(document.getElementById("leadText").value != ""){
endValue = endValue+"-"+document.getElementById("leadText").value;
}
if(document.getElementById("thermoquantText").value != ""){
endValue = endValue+"-"+document.getElementById("thermoquantText").value;
}
if(document.getElementById("quantityText").value != ""){
endValue = endValue+"-"+document.getElementById("quantityText").value;
}
document.getElementById("completeText").value = endValue;
}
</script>
</body>
</div>
</div>
</div>
</div>

Categories

Resources