Develop Reference

How do I fix the conditional dropdown issue

I have created a conditional dropdown in which by default the values are "Select vehicle make" and "Select vehicle model". The select vehicle model is disabled by default because I want the customer to choose the make first so that we can load related models.
There's another option called "other". What it means is if the make and model are not listed in the list choose other. The other will bring two input text field where the customer can write make and model by themselves.
Issue 1: Now coming to the issue, if I select any "Make", by default the "Model" field should just become active, and that's working fine, but what's wrong with it is the model dropdown is selecting "- other -" by default instead of "Select vehicle model".
Issue 2: How do I replace the model dropdown with an input text field when I choose "- other -" from the "Model" dropdown.
Looking forward to a solution.
var $make = $('#make'),
$model = $('#model'),
$options = $model.find('option');
$('#make').on('change', function() {
if (this.value == '*') {
removeClassDynamicClass();
changeModelDiv();
$("#others").addClass("hide");
$("#others input").attr("disabled", "disabled");
$(".model-div-not-others").removeClass("hide");
$(".model-div-not-others select").removeAttr("disabled");
$(".model-div-for-others").addClass("hide");
$('#model').attr('disabled', 'disabled');
$("#country-registeration").attr('disabled', 'disabled');
$("#opt-details").attr('disabled', 'disabled');
} else if (this.value == 'others') {
if ($('.dynamic-class-4').hasClass('col-lg-4')) {
$('.dynamic-class-4').removeClass('col-lg-4');
$('.dynamic-class-4').addClass('col-lg-3');
}
changeModelDiv();
$("#others").removeClass("hide");
$("#others input").removeAttr("disabled");
$(".model-div-not-others").addClass("hide");
$(".model-div-for-others").removeClass("hide");
$(".model-div-for-others input").removeAttr("disabled");
$('#model').attr('disabled', 'disabled');
$("#opt-details").removeAttr('disabled');
// In-case of other countries added remove the below commented code
//$("#country-registeration").removeAttr('disabled');
} else {
$model.html($options.filter('[value="' + this.value + '"]'));
removeClassDynamicClass();
changeModelDiv();
$("#others").addClass("hide");
$("#others input").attr("disabled", "disabled");
$(".model-div-not-others").removeClass("hide");
$(".model-div-not-others select").removeAttr("disabled");
$(".model-div-for-others").addClass("hide");
$('#model').removeAttr('disabled');
$("#opt-details").removeAttr('disabled');
// In-case of other countries added remove the below commented code
//$("#country-registeration").removeAttr('disabled');
}
});
function removeClassDynamicClass() {
if ($('.dynamic-class-4').hasClass('col-lg-3')) {
$('.dynamic-class-4').removeClass('col-lg-3');
$('.dynamic-class-4').addClass('col-lg-4');
}
}
function changeModelDiv() {
if ($('#make').val() == 'others') {
$('.model-div-not-others').addClass("hide");
$('.model-div-for-others').removeClass("hide");
$('#model-others').removeAttr("disabled");
$('#model').attr('disabled', 'disabled');
} else {
if ($('.model-div-not-others').hasClass("hide")) {
$('.model-div-not-others').removeClass("hide");
$('.model-div-for-others').addClass("hide");
$('#model').removeAttr("disabled");
$('#model-others').attr('disabled', 'disabled');
}
}
}
$('#make').trigger('change');
.hide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 dynamic-class-4 float-left mb-3">
<label class="car-list-step-label">Make</label>
<select class="form-control custom-select" name="make" id="make">
<option disabled="disabled" selected="selected" value="*">Select vehicle make</option>
<option value="1">Acura</option>
<option value="2">Abarth</option>
<option value="3">Alfa Romeo</option>
<option value="4">Alpina</option>
<option value="5">Aston Martin</option>
<option value="others">Other</option>
</select>
</div>
<!-- Make Others Details -->
<div id="others" class="col-xs-12 col-sm-6 col-md-4 col-lg-4 dynamic-class-4 float-left mb-3 hide">
<label class="car-list-step-label">Make (others)</label>
<input id="details" name="details" type="text" placeholder="Make" class="form-control car-list-input">
</div>
<!-- Vehicle Model -->
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 dynamic-class-4 float-left mb-3">
<div class="model-div-not-others">
<label class="car-list-step-label">Model</label>
<select class="form-control custom-select" name="model" id="model">
<option disabled="disabled" selected="selected">Select vehicle model</option>
<!-- Acura -->
<option value="1">1.6 EL</option>
<option value="1">1.7 EL</option>
<option value="1">2.3 CL</option>
<option value="1">2.5 TL</option>
<option value="1">3.0 CL</option>
<option value="1">3.2 TL</option>
<option value="1">3.5 RL</option>
<option value="1">CL</option>
<option value="1">CSX</option>
<option value="1">EL</option>
<option value="1">ILX</option>
<option value="1">Integra</option>
<option value="1">Legend</option>
<option value="1">MDX</option>
<option value="1">NSX</option>
<option value="1">NSX-T</option>
<option value="1">RDX</option>
<option value="1">RL</option>
<option value="1">RSX</option>
<option value="1">SLX</option>
<option value="1">TL</option>
<option value="1">TSX</option>
<option value="1">Vigor</option>
<option value="1">ZDX</option>
<option value="1">- Other -</option>
<!-- Abarth -->
<option value="2">124</option>
<option value="2">500</option>
<option value="2">500C</option>
<option value="2">595</option>
<option value="2">595C</option>
<option value="2">695</option>
<option value="2">Grande Punto</option>
<option value="2">Punto Evo</option>
<option value="2">Spider Cabrio</option>
<option value="2">- Other -</option>
<!-- Alfa Romeo -->
<option value="3">145</option>
<option value="3">146</option>
<option value="3">147</option>
<option value="3">155</option>
<option value="3">156</option>
<option value="3">159</option>
<option value="3">164</option>
<option value="3">166</option>
<option value="3">33</option>
<option value="3">4C</option>
<option value="3">75</option>
<option value="3">Alfetta</option>
<option value="3">GT</option>
<option value="3">GTV</option>
<option value="3">GTV-6</option>
<option value="3">GTV6</option>
<option value="3">Giulia</option>
<option value="3">Guiletta</option>
<option value="3">Milano</option>
<option value="3">Mito</option>
<option value="3">Spider</option>
<option value="3">- Other -</option>
<!-- Alpina -->
<option value="4">B4</option>
<option value="4">B5</option>
<option value="4">- Other -</option>
<!-- Aston Martin -->
<option value="5">Cygnet</option>
<option value="5">DB7</option>
<option value="5">DB9</option>
<option value="5">Rapide S</option>
<option value="5">Vanquish S</option>
<option value="5">Vantage</option>
<option value="5">- Other -</option>
</select>
</div>
<!-- Vehicle Model Others -->
<div class="model-div-for-others hide">
<label class="car-list-step-label">Model (others)</label>
<input disabled id="model-others" name="models" type="text" placeholder="Model" class="form-control car-list-input">
</div>
</div>

To fix issue #1, one option is to pre-assign a value to the "-Select Vehicle Model" option before running the filter, then set it as the "selected" option.
// pre-assign a value to the first option - "Select Vehicle Model"
$("#model option:eq(0)").val(this.value);
// run the filter, which will now include the first option
$model.html($options.filter('[value="' + this.value + '"]'));
// make the first option the selected option
$("#model option:eq(0)").prop("selected",true);
My solution on CodePen: https://codepen.io/onegrumpybunny/full/NmjzXb
For issue #2, you can hide the div containing the "model" select and show the div containing the "other" text field.
$('#model').on('change', function() {
if ($('#model :selected').text() == '- Other -') {
// uncomment this to hide the "model" select when "other" option is selected
//$('.model-div-not-others').addClass("hide");
$('.model-div-for-others').removeClass("hide");
$('#model-others').removeAttr("disabled");
} else {
$('.model-div-for-others').addClass("hide");
$('#model-others').attr("disabled","disabled");
}
});
A word of warning though, using the text of an option is not best practice. I'd recommend assigning a valid value to each option. Then, add a data-attribute value for each option and filter on that instead (I believe someone else mentioned this as well). This will leave you with valid values coming from your form.
--- edit ---
Here is an example of your app with valid values assigned to each option and filtering done on a data attribute value: https://codepen.io/onegrumpybunny/full/wZevjy

Connecting two Combo-boxes with html and js

I am trying to make these two combo-boxes join each other. But, my problem is, that my second combo-box cannot change if I select the category.
This is what I've done.
HTML CODE
<!-- language: lang-html -->
<label for="JenisBarang">Jenis Barang</label>
<br>
<select id="JenisBarang" name="JenisBarang">
<option value="0" selected="selected">Mouse</option>
<option value="1">Keyboard</option>
<option value="2">Webcam</option>
</select>
<br>
<label for="PilihBarang">Pilih Barang</label>
<br>
<select id="PilihBarang_0" name="PilihBarang_0" style="display: inline;">
<option value="1">Asus GX-1000</option>
<option value="2">Logitech M238 Edisi : Burung Hantu</option>
<option value="3">Logitech M238 Edisi : Astronot</option>
<option value="4">Logitech M238 Edisi : Musang</option>
<option value="5">Logitech M238 Edisi : Kera</option>
<option value="6">Lenovo N700</option>
<option value="7">Asus Gladius</option>
</select>
<select id="PilihBarang_1" name="PilihBarang_1" style="display: none;">
<option value="1">Logitech K400r</option>
<option value="2">Logitech MK240</option>
<option value="3">Asus GK2000</option>
</select>
<select id="PilihBarang_2" name="PilihBarang_2" style="display: none;">
<option value="1">Lenovo Webcam</option>
<option value="2">Logitech C920</option>
</select>
<br>
Java Script CODE
<script>
function change_product(evt)
{
var JenisBarang=document.getElementById('JenisBarang'),whichstate;
whichstate=JenisBarang.options[state.selectedIndex].value;
for(var i=0;i<JenisBarang.options.length;i++)
document.getElementById('PilihBarang_'+i).style.display=(i==whichstate ? 'inline':'none');
}
</script>
Dictionary
JenisBarang means the category ex Mouse
PilihBarang means the items ex Mouse Logitech M185

Can you check the following Code. use value specify options in the second combo box. It is a simple code hope nothing to explain.. I have placed couple of comments.
$("#comboBox1").change(function() {
if ($(this).data('options') === undefined) {
/* Get all the options in second Combo box*/
$(this).data('options', $('#comboBox2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#comboBox2').html(options);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select name="comboBox1" id="comboBox1">
<option value="0">Please Select</option>
<option value="1">Mouse</option>
<option value="2">Keyboard</option>
<option value="3">WebCam</option>
</select>
<!-- Second Combo Box-->
<select name="comboBox2" id="comboBox2">
<option value="1">Mouse Model 1</option>
<option value="1">Mouse Model 2</option>
<option value="1">Mouse Model 3</option>
<option value="2">Keyboard model 1</option>
<option value="2">Keyboard model 2</option>
<option value="2">Keyboard model 3</option>
<option value="3">webcam model 1</option>
<option value="3">webcam model 2</option>
</select>
Edit : JS Fiddle link JS Fiddle

Action when clicking on an option in a select menu

I am programming a website with a map and a side panel, where I want some action to happend I chose an option in a select-menu.
This is my code:
<select id="optionList" onchange="display_div(document.getElementById('optionList').value);">
<option selected="selected">Chose league</option>
<option value="PL">Premier League</option>
<option value="CH">Championship</option>
<option value="L1">League 1</option>
<option value="L2">League 2</option>
</select>
<p></p>
<div id="PL" style="display:none;">
<select id="plTeamList" onchange="display_div2(document.getElementById('plTeamList').value);">
<option selected="selected">Chose team</option>
<option value="MUN">Manchester United</option>
<option value="CHE">Chelsea</option>
<option value="BOU">Bournemouth</option>
<option value="NEW">Newcastle</option>
</select>
<div id="MUN" style="display:none" onclick="clickOnMUN()"> .... </div>
</div>
where I have a script with what happens when you choose Manchester United from the menu (it is plotting some popups in the map):
function clickOnMUN() {
var info = whichteam("MU"); // Finner ut hvilket lag som spiller, og info om stadion
var marker = L.marker([info.substring(0, 5), info.substring(5, 10)]).addTo(map);
marker.bindPopup(info.substring(10));
}
This code is oddly not doing the script when I chose an option in the team-list.
The display_div-functions are only showing the options.

The only issue I see is the second "display_div" call... it says "display_div2" maybe a typo... but if it is the same as the first and only show the hidden div, removing the 2 should solve part of the problem. Also it could improve the code if you use some listeners for the clicks events instead of placing the function call inside the html tag. But this could be a version of your current code:
function display_div( theDiv ) {
console.log ( theDiv );
$('#'+theDiv).css("display", "block" );
}
function clickOnTeamList(targ) {
$('#status').html("clicked a team " + targ );
}
p {
font-family: verdana;
font-size:12px;
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="optionList" onchange="display_div(document.getElementById('optionList').value)">
<option selected="selected">Chose league </option>
<option value="PL">Premier League • only option active</option>
<option value="CH">Championship</option>
<option value="L1">League 1</option>
<option value="L2">League 2</option>
</select>
<p></p>
<div id="PL" style="display:none;">
<select id="plTeamList" onchange="display_div(document.getElementById('plTeamList').value);">
<option selected="selected">Chose team</option>
<option value="MUN">Manchester United</option>
<option value="CHE">Chelsea</option>
<option value="BOU">Bournemouth</option>
<option value="NEW">Newcastle</option>
</select>
<div id = "MUN" style="display:none" onclick="clickOnTeamList(' Manchester United')" ><p>Team: Manchester United</p></div>
<div id = "CHE" style="display:none" onclick="clickOnTeamList('Chelsea')" ><p>Team: Chelsea</p></div>
<div id = "BOU" style="display:none" onclick="clickOnTeamList('Bournemouth')" ><p>Team: Bournemouth</p></div>
<div id = "NEW" style="display:none" onclick="clickOnTeamList('Newcastle')" ><p>Team: Newcastle</p></div>
</div>
<div id="status">___</div>

How to show/hide divs with multiple select options

I've been sorting a HTML5 form with jQuery to show/hide divs based on the selected value in the select menu. However I've come across a problem where if an option is selected, then it is changed, the original selection with its div is not hidden, and the new one is added to the page, and generating more than one select menu if an user changes their choice in the select menu. I'm hoping a fresh pair of eyes would help and point out the solution to this, as I would like the divs to show/hide based on the value or if it's not selected at all.
HTML code
<div class="country">
<h1>Pick country</h1>
<select class="country_option">
<option value="england">England</option>
<option value="scotland">Scotland</option>
<option value="ireland">Ireland</option>
<option value="wales">Wales</option>
</select>
</div>
<div class="not-selected">
<p>Please select a country to be able to pick the region.</p>
</div>
<div class="england" id="england">
<h3>Pick region in England</h3>
<select>
<option value="North">North</option>
<option value="South">South</option>
<option value="East">East</option>
<option value="West">West</option>
<option value="Midlands">Midlands</option>
</select>
</div>
<div class="scotland" id="scotland">
<h3>Pick region in Scotland</h3>
<select>
<option value="North">North</option>
<option value="South">South</option>
</select>
</div>
<div class="ireland" id="ireland">
<h3>Pick region in Ireland</h3>
<select>
<option value="Northern">Northern</option>
<option value="Republic">Republic</option>
</select>
</div>
<div class="wales" id="wales">
<h3>Pick region in Wales</h3>
<select>
<option value="North">North</option>
<option value="South">South</option>
</select>
</div>
jQuery code
$(document).ready(function(){
$('.england, .scotland, .ireland, .wales').hide();
$('.country_option').change(function() {
$('.not-selected').hide();
$('#' + $(this).val()).show();
});
});
Alternatively, here is the CodePen link. I look forward to anyone pointing the obvious or the less obvious solution to my conundrum at the moment.

You haven't actually included any code within your change function which will hide the divs. I guess that the intention of $('.not-selected').hide();was to do this but you never apply the .not-selected class to any of the country divs.
Perhaps a simple method would be to call the hide() function on all the country divs every time a change is made.
$(document).ready(function(){
$('.country_option').change(function() {
$('.england, .scotland, .ireland, .wales').hide();
$('#' + $(this).val()).show();
});
});

Your code should be looks like this
$(document).ready(function(){
$('.england, .scotland, .ireland, .wales').hide();
$('.country_option').change(function() {
$('.england, .scotland, .ireland, .wales').hide();
$('.not-selected').hide();
$('#' + $(this).val()).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="country">
<h1>Pick country</h1>
<select class="country_option">
<option value="england">England</option>
<option value="scotland">Scotland</option>
<option value="ireland">Ireland</option>
<option value="wales">Wales</option>
</select>
</div>
<div class="not-selected">
<p>Please select a country to be able to pick the region.</p>
</div>
<div class="england" id="england">
<h3>Pick region in England</h3>
<select>
<option value="North">North</option>
<option value="South">South</option>
<option value="East">East</option>
<option value="West">West</option>
<option value="Midlands">Midlands</option>
</select>
</div>
<div class="scotland" id="scotland">
<h3>Pick region in Scotland</h3>
<select>
<option value="North">North</option>
<option value="South">South</option>
</select>
</div>
<div class="ireland" id="ireland">
<h3>Pick region in Ireland</h3>
<select>
<option value="Northern">Northern</option>
<option value="Republic">Republic</option>
</select>
</div>
<div class="wales" id="wales">
<h3>Pick region in Wales</h3>
<select>
<option value="North">North</option>
<option value="South">South</option>
</select>
</div>

How to add content with select tag without refreshing the page(AJAX)

I am trying to make a page when someone clicks on a option in the select form, another select form appears then another without having to refresh the page. I know you use AJAX for not refreshing but my code is somehow not working when tried.
HTML
<div id="example">
<select id="foo">
<option value="">lets make another</option>
<option value="index.html">Demographic</option>
<option value="index.html">Crime</option>
<option value="index.html">School</option>
</select>
</div>
<div id="result">
</div>
javascript(AJAX)
$(document).ready(function() {
$('#example').on('click', 'button.switch', function() {
$.ajax('AjaxLoadedContent.html')
.done(function(response){
$('#result').html(response);
});
});
});
Content thats suppose to load(Another select form)
<select id="foo">
<option value="">Pick a site</option>
<option value="index.html">Demographic</option>
<option value="index.html">Crime</option>
<option value="index.html">School</option>
</select>
But whats wrong??

As #Goose said in the comments, instead of using an Ajax call you could hide the select boxes and show them based on the value of the shown select option, as shown below:
HTML
<div id="example">
<select id="foo">
<option value="">lets make another</option>
<option value="demographic">Demographic</option>
<option value="crime">Crime</option>
<option value="school">School</option>
</select>
<select id="demographic" class="toggle">
<option value="">Demographic</option>
<option value="d1">d1</option>
<option value="d2">d2</option>
<option value="d3">d3</option>
</select>
<select id="crime" class="toggle">
<option value="">Crime</option>
<option value="c1">c1</option>
<option value="c2">c2</option>
<option value="c3">c3</option>
</select>
<select id="school" class="toggle">
<option value="">School</option>
<option value="s1">s1</option>
<option value="s2">s2</option>
<option value="s3">s3</option>
</select>
</div>
<div id="result"></div>
CSS
.toggle {
display:none;
}
JS
$('#foo').on('change', function(){
var val = $(this).val();
$('.toggle').hide();
$('#'+val).show();
});
Fiddle

If your content is fairly static, I'd use the following code that doesn't invoke additional http calls:
HTML:
<div id="example">
<select id="foo">
<option value="">lets make another</option>
<option value="">Demographic</option>
<option value="">Crime</option>
<option value="">School</option>
</select>
</div>
<div id="result">
<select id="foo">
<option value="">Pick a site</option>
<option value="">Demographic</option>
<option value="">Crime</option>
<option value="">School</option>
</select>
</div>
JS:
$(function() {
$("#result").hide();
$("#foo").click(function() {
$("#result").show();
});
});
Let me know if it helps. Cheers!