I want to ask quick question, i want to make a select drop down that when i choose one of the options the values of the other select drop down change ...
let's say i have select drop down called model that has the following
- Acura
- Aston martin
- Audi
I want when i choose (let's say ) Audi, in the type select drop down i find Audi type's only
- A3
- A5
- A4
I don't want to use AJAX calls, i just want to use javascript or jquery to filter the data
thanks guys
Like Shomz said,
Assuming the dropdowns look like this:
<!-- First dropdown. Make of car -->
<select name='Manufactor' id='make'>
<option value='null'>Select a Make</option>
<option value='Audi'>Audi</option>
<option value='BMW'>BMW</option>
<option value='Volvo'>Volvo</option>
</select>
<br />
<!-- Second dropdown. Model of car -->
<select name='Model' id='model'>
</select>
The javascript would look like this:
<script type='text/javascript'>
var model = ['','audi','bmw','volvo']; //Set makes
model[1] = ['A3', 'A5', 'A4']; // Set Audi models
model[2] = ['M3', 'M5', 'M6']; // Set BMW models
model[3] = ['C30', 'C70']; // Set Volvo models
var test = model[1][1];
function setModel(index) {
var modelDropdown = document.getElementById('model');
modelDropdown.options.length = null;
for(var i = 0; i < model[index].length; i++) {
modelDropdown.options[i] = new Option(model[index][i]);
}
}
window.onload = function() {
var makeDropdown = document.getElementById('make');
makeDropdown.onchange = function() {
setModel(this.selectedIndex);
}
}
</script>
Notice that the Models start at index 1 and not 0, because the first option is a blank Select Model option.
AJAX calls would still be the best solution, but if you don't want to use them, you can always manually create arrays for each of the main options, make an onchange event on the select element which would call the selected array and create another dropdown based on the elements of that array. Hope I didn't make it sound to complicated, since it isn't.
Here's a sample how to extract values with jQuery.
Related
Is it possible to select the dropdown list by using the display-text of the options in the console(JavaScript)?
In my workplace, I need to fill a web form every day. But the options are too much to load, so I hope to use the Chrome console to select the option instead of using the mouse to click.
For now, I can use Value to select the option, but when I try to use the text, it fails.
The HTML sample and the JavaScript I used are as below. Could someone help?
Success - document.querySelector("#sel").value = 123
Fails - document.querySelector("#sel").text = "Product A"
<select>
<option value="123"> Product A </option>
<option value="243"> Product B </option>
<option value="212"> Product C </option>
<option value="466"> Product D </option>
</select>
Array.from(document.querySelectorAll('option')).find(el => el.textContent === 'Product A');
Truly sorry for the confusing example.
After trying lots of solutions, the final coding as below:
var txt = prompt();
for (i = 0; i < document.querySelector("#sel").options.length; i++) {
if(document.querySelector("#sel").options[i].text == txt){
document.querySelector("#sel").options[i].selected = true;
break;
}
}
With these codes, the User can select the specific options by entering the name of the product instead of clicking the dropdown list with the mouse and crash the browser.
Im making a small webpage. The goal is simple. I have a select with a few options; it is planet names; and their sizes are placed in the value bracket of each option. What i want to do is upon selecting an option ( a planet ), a javascript code will take the choice's size, and give new options to another select bracket. So depending on the first select , the second select bracket will be given new options.
The code is simple and ive overwatched it but theres no error.
I just dont get what's not working. Here's the code:
<select id="selectedplanet" name="selectedplanet" onchange="jcab3();">
<?php
while($fetch28a3=mysqli_fetch_array($query28a3)){
echo('<option value="'.$fetch28a3[1].'">'.$fetch28a3[0].'</option>');
}?>
</select><br/>
<p>Location: </p><br/><br/><p>X:</p><select id="locationx" name="locationX"></select><br/><p>Y:</p><select id="locationy" name="locationY"></select>
This is the html/php side. As you can see , I summon a php that fetch some datas from a mysql table. It assign new options on a select bracket. The select has an 'onchange' , which summon the javascript function 'jcab3' upon changing the select . Then here's the javascript:
function jcab3(){
var final2="";
var final3="";
var prima=parseInt(document.getElementById("selectedplanet").value);
for(i31=0;i31<prima;i31++){
final2=final2+'<option value="'+i31+'">'+i31+'</option>';
}
for(i32=0;i32<prima;i32++){
final3=final3+'<option value="'+i32+'">'+i32+'</option>';
}
document.getElementById("locationx").innerHTML=final2;
document.getElementById("locationy").innerHTML=final3;
}
basically, it takes the size of the planet, then give out new options from 0 to the planet's size , and should place these new options under 2 differents select brackets ( 'locationx' and 'locationy'). But , it just doesnt work.
can anyone help ?
thanks
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<select id="myplanet">
<option value="4">Earth</option>
<option value="5">Mars</option>
<option value="6">JUpiter</option>
</select>
<p>X:</p>
<select id="locationx" name="locationX"></select><br/>
<p>Y:</p>
<select id="locationy" name="locationY"></select>
<script>
document.getElementById("myplanet").addEventListener('change', function(){
var e = document.getElementById("myplanet");
var value = e.options[e.selectedIndex].value;
var prima = parseInt( value )
var final2="";
var final3="";
for(i31=0;i31<prima;i31++){
final2=final2+'<option value="'+i31+'">'+i31+'</option>';
}
for(i32=0;i32<prima;i32++){
final3=final3+'<option value="'+i32+'">'+i32+'</option>';
}
document.getElementById("locationx").innerHTML = final2
document.getElementById("locationy").innerHTML = final3
})
</script>
</body>
</html>
How many new <option>s tags are you adding into your <select>s?
Consider that as saying by #Michael Bogwardt in his comment about what innerHTML is doing in javascript?:
However, DOM manipulations using innerHTML are slower and more
failure-prone than manipulations based on individual DOM objects.
Would be better to create your <option>s tags by using element.appendChild() and element.setAttribute() functions. Your code could look like this:
function jcab3(){
var prima=parseInt(document.getElementById("selectedplanet").value);
var x = document.getElementById("locationx");
var y = document.getElementById("locationy");
for(i31=0;i31<prima;i31++){
var option = x.appendChild("OPTION");
option.setAttribute("value", i31);
}
for(i32=0;i32<prima;i32++){
var option = y.appendChild("OPTION");
option.setAttribute("value", i32);
}
}
I'm building an online shop. From the dropdown the end user picks one option in the select option, and then the price of that option is added to the main price.
<div id='custom-price'>1000</div>
<select id="capsize-price" onchange="changePri()" name="capsize-price">
<option value='100'>100</option>
<option value='700'>700</option>
</select>
function changePri() {
var customPrice = parseFloat(document.querySelector("#custom-price").textContent);
var capsizePrice = document.querySelector("#capsize-price").value;
var price = customPrice + capsizePrice;
document.querySelector("#custom-price").textContent = price;
}
I've got that alright, but then I noticed that the price keeps adding.
For example, if the end user selects only option 1(100) first, and then later selects only option 2 (700) it adds the price of both.
I know this is what it is supposed to do based on my code but I am struggling to come up with logic on how to just add option 1 when the user selects that and then add just option 2 when the user selects option 2 instead of what it is doing right now.
Any help is appreciated.
Your logic here is making it impossible to know what the original price was once the user has selected a capsize-price. You need to store the original value of custom-price somewhere and use it when generating the final price. For example:
<div id='original-price'>1000</div>
<div id='custom-price'></div>
<select id="capsize-price" onchange="changePri()" name="capsize-price">
<option value='100'>100</option>
<option value='700'>700</option>
</select>
function changePri() {
var originalPrice = parseFloat(document.querySelector("#original-price").textContent);
var capsizePrice = document.querySelector("#capsize-price").value;
var customPrice = originalPrice + capsizePrice;
document.querySelector("#custom-price").textContent = customPrice;
}
Not sure this is what you are looking for ?
function changePri() {
var capsizePrice = parseInt(document.querySelector("#capsize-price").value);
var price = basePrice + capsizePrice;
document.querySelector("#custom-price").textContent = price;
}
const basePrice = 1000;
document.querySelector("#custom-price").textContent = basePrice;
<div id='custom-price'></div>
<select id="capsize-price" onchange="changePri()" name="capsize-price">
<option value='100'>100</option>
<option value='700'>700</option>
</select>
Basically puts your "base price" into a JS constant and the adds the selections to that. You should probably use a handler rather than calling the function inline also.
I have a drop down like
<select>
<option value="">Select</option>
<option value="1">ABC</option>
<option value="2">DEF</option>
</select>
I have the same select box in more than 10 places in different pages.This is populating through ajax.But when i am calling this from a particular page i need to select ABC by default.But i don't want in remaining places.
I don't want to write the code again in my page.Is there any possibility for this.
Thanks in advance...
It's going to be a very generic answer that you'll have to modify for your needs, but if the select and all other markup is the same on all pages, which is very unlikely, you have to check the URL to see if you're on a certain page.
At the bottom of the page, before </body>, you can do something like :
if ( window.location.href.indexOf('/mysite.html') != -1 ) {
document.getElementsByTagName('select')[0].value = '1';
}
This will set the default value of the first select on the page to 1, and show ABC, if the URL contains mysite.html.
FIDDLE
Here you have another example (with JQuery) taking into account the comment you did about loading your combos with options obtained with ajax: Try if yourself
JQUERY:
var options = "<option value=\"\">Select</option><option value=\"1\">ABC</option><option value=\"2\">DEF</option>";
function test() {
// Populate select with ID destiny 1 without selecting a value
populate("#destiny1", null, options);
// Populate select with ID destiny 2, selecting the value of the first index
populate("#destiny2", 1, options);
}
function populate(destiny, indexOption, options) {
$(destiny).html(options);
if (indexOption != null) {
$(destiny + " option")[indexOption].selected = true;
$(destiny).trigger("change");
}
}
HTML:
<select id="destiny1"></select>
<select id="destiny2"></select>
<input type="button" onclick="test()" value="TEST"></input>
I have a cshtml file in which i have following code (a dropdown with data taken from a model)
<div class="controls">
<select ng-model="model.CountryCode" ng-change="countryChanged({{country.ISO316613LetterCode}})">
<option ng-repeat="country in model.Countries" value="{{country.ISO316613LetterCode}}">{{country.CommonName}}</option>
</select>
</div>
And i have this function, in which i detect that a country was chosen from the dropdown
$scope.countryChanged = function(){
var countryDet = _.find($scope.model.CountryDetails, function(cd){
console.log("countryDet");
return cd.CountryCode === $scope.model.Country;
});
if(countryDet){
$scope.model.CountryDetail = countryDet;
// set business properties from country details
$scope.model.DateFormat = countryDet.DefaultDateFormat;
$scope.model.ShortDateFormat = countryDet.DefaultShortDateFormat;
$scope.model.DateFormatJs = countryDet.DefaultJsDateFormat;
$scope.model.LongDateFormat = countryDet.DefaultLongDateFormat;
$scope.model.TaxCode = countryDet.SalesTaxName;
$scope.model.Currency = countryDet.DefaultCurrencySign;
$scope.model.AccSoftwareDateFormat = countryDet.DefaultAccSoftwareDateFormat
$scope.model.WeightSystem = countryDet.DefaultWeightSystem
}
$scope.loadStates();
};
And another function, that should display additional dropdown on web, showing states if the country choosen was USA or AUstralia
$scope.stateVisible = function(){
if($scope.model && $scope.model.CountryDetail){
return $scope.model.CountryDetail.StateVisible;
}
return false;
};
My problem is, that i do not know how to send the selected LetterCode (value of option) to function countryChanged, because, i thought if i do so, then i will be able to easilly load the states into the additional dropdown and show it on site.
Simply use ng-options which will assign the selected model to the ng-model for the <select>. For example
<select ng-model="model.selectedCountry" ng-change="countryChanged()"
ng-options="country.CommonName for country in model.Countries track by country.ISO316613LetterCode">
</select>
Then, your countryChanged() function (and any other controller function) can use $scope.model.selectedCountry which will be a full country object.
Plunker demo ~ http://plnkr.co/edit/tFjvT92B1itmwkRjZIbJ?p=preview
Since you're using $scope for every variable you could use rootScope
https://docs.angularjs.org/api/ng/service/$rootScope
for passing the data.