What I'm trying is something pretty basic, but I can't do it because the examples I see aren't anything similar to what I'm looking for.
There are 2 select, one of them you choose manually and the other dynamically changes depending on the value of the first one.
If the value of the first select is 1, that in the second one they only appear whose value is 1 as well.
I want to make it 100% JavaScript, I don't want any JQuery.
HTML.php
<select onchange="catch_value_types()" name="types" id="types">
<option value="1">Meat</option>
<option value="2">Fish</option>
<option value="3">Vegetables</option>
</select>
<select name="food" id="food">
<option value="1">Pork</option>
<option value="1">Cow</option>
<option value="1">Chicken</option>
<option value="2">Sardine</option>
<option value="2">Salmon</option>
<option value="2">Mackerel</option>
<option value="3">Spinach</option>
<option value="3">Kale</option>
<option value="3">Green peas</option>
</select>
JavaScript.js
function catch_value_types() {
var types_value_option = document.getElementById("types").value;
// What should I put here?
}
Loop through the options and hide if value doesnot match
function catch_value_types() {
const selectedValue = document.getElementById("types").value;
const select2 = document.getElementById("food");
Array.from(select2.options).forEach((node) => node.style.display = node.value === selectedValue ? "block": "none");
}
<select onchange="catch_value_types()" name="types" id="types">
<option value="1">Meat</option>
<option value="2">Fish</option>
<option value="3">Vegetables</option>
</select>
<select name="food" id="food">
<option>Please Select</option>
<option value="1">Pork</option>
<option value="1">Cow</option>
<option value="1">Chicken</option>
<option value="2">Sardine</option>
<option value="2">Salmon</option>
<option value="2">Mackerel</option>
<option value="3">Spinach</option>
<option value="3">Kale</option>
<option value="3">Green peas</option>
</select>
Related
I have this scenario where i have 4 drop down boxes, where you can choose CM for a carport and a shed, within that carport.
I want to prompt the user with messages/errors in these scenarios:
the shed is chosen to be wider than it is long.
the shed is atleast 60cm smaller than the carports in both width and length
only one of the sheds dimensions being chosen
the form looks like this
<form name="createorder" action="FrontController" method="POST">
<input type="hidden" name="command" value="createorder">
<br>
Length of shed:<br>
<select name="lengthShed">
<option value="0">I do not want a shed</option>
<option value="180">180cm</option>
<option value="210">210cm</option>
<option value="240">240cm</option>
<option value="270">270cm</option>
<option value="300">300cm</option>
<option value="330">330cm</option>
<option value="360">360cm</option>
<option value="390">390cm</option>
<option value="420">420cm</option>
<option value="450">450cm</option>
<option value="480">480cm</option>
<option value="510">510cm</option>
<option value="540">540cm</option>
<option value="570">570cm</option>
<option value="600">600cm</option>
<option value="630">630cm</option>
<option value="660">660cm</option>
<option value="690">690cm</option>
<option value="720">720cm</option>
</select>
<br>
Width of shed:<br>
<select name="widthShed">
<option value="0">I do not want a shed</option>
<option value="18=">180cm</option>
<option value="210">210cm</option>
<option value="240">240cm</option>
<option value="270">270cm</option>
<option value="300">300cm</option>
<option value="330">330cm</option>
<option value="360">360cm</option>
<option value="390">390cm</option>
<option value="420">420cm</option>
<option value="450">450cm</option>
<option value="480">480cm</option>
<option value="510">510cm</option>
<option value="540">540cm</option>
<option value="570">570cm</option>
<option value="600">600cm</option>
<option value="630">630cm</option>
<option value="660">660cm</option>
<option value="690">690cm</option>
</select>
<br>
Width:<br>
<select name="width">
<option value="240">240cm</option>
<option value="270">270cm</option>
<option value="300">300cm</option>
<option value="330">330cm</option>
<option value="360">360cm</option>
<option value="390">390cm</option>
<option value="420">420cm</option>
<option value="450">450cm</option>
<option value="480">480cm</option>
<option value="510">510cm</option>
<option value="540">540cm</option>
<option value="570">570cm</option>
<option value="600">600cm</option>
<option value="630">630cm</option>
<option value="660">660cm</option>
<option value="690">690cm</option>
<option value="720">720cm</option>
<option value="750">750cm</option>
</select>
<br>
Length:<br>
<select name="length">
<option value="240">240cm</option>
<option value="270">270cm</option>
<option value="300">300cm</option>
<option value="330">330cm</option>
<option value="360">360cm</option>
<option value="390">390cm</option>
<option value="420">420cm</option>
<option value="450">450cm</option>
<option value="480">480cm</option>
<option value="510">510cm</option>
<option value="540">540cm</option>
<option value="570">570cm</option>
<option value="600">600cm</option>
<option value="630">630cm</option>
<option value="660">660cm</option>
<option value="690">690cm</option>
<option value="720">720cm</option>
<option value="750">750cm</option>
<option value="780">780cm</option>
</select>
Bind a function to your <select> elements onchange property.
let selects = document.querySelectorAll('select');
for(var i = 0; i < selects.length; i++){
selects[i].onchange = function(){
// Check for your conditions
// If your warning conditions are met, prompt user
}
}
That is, assuming you want the validation to happen when the user changes one of the select's values.
If you want to validate with a button click, you can instead bind the function to the click event of the button.
let button = document.getElementById(buttonID);
button.onclick = function(){
// Check for your conditions
// If conditions are met, prompt user
}
To prompt the user, you can use a simple alert() to which you pass your message. Or make a more elaborate function to do something custom.
As for your conditions, that sounds like commercial math. Might have to split your question in multiple questions here as there are a lot of possible awnsers.
It might be easier for you to add IDs to your selects so you can get them via document.getElementById(idString). You can then get their value through document.getElementById(idString).value. And to use it in math solving, you will need to parse the string that the <select> will return as value, like so parseInt(document.getelementById(idString).value).
I have a list of countries like this:
The list is very extensive. I need to be able on a button click to move (focus) to the specified country.
There are many threads in StackOverflow but none of them worked. For example I tried this:
var code = 40;
$('#id_resource-regions').val(code).scrollTop(160);
There is no response and no error/warnings in the developers tool.
Note that the list is created using django forms and templates.
Select the option element you are looking for.
Get the offset top position using .offset(), of the selected option element.
Get the offset top of the select element.
Use .scrollTop() to scroll to the desired option.
Here is an example
var btn = $('button')
var select = $('select')
btn.on('click', function() {
var option = select.find("option:contains('item-30')");
var optionTop = option.offset().top
var selectTop = select.offset().top;
select.scrollTop(select.scrollTop() + (optionTop - selectTop));
option.prop('selected', true)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="" id="select" multiple="multiple">
<option value="">item-1</option>
<option value="">item-2</option>
<option value="">item-3</option>
<option value="">item-4</option>
<option value="">item-5</option>
<option value="">item-6</option>
<option value="">item-7</option>
<option value="">item-8</option>
<option value="">item-9</option>
<option value="">item-10</option>
<option value="">item-11</option>
<option value="">item-12</option>
<option value="">item-13</option>
<option value="">item-14</option>
<option value="">item-15</option>
<option value="">item-16</option>
<option value="">item-17</option>
<option value="">item-18</option>
<option value="">item-19</option>
<option value="">item-20</option>
<option value="">item-21</option>
<option value="">item-22</option>
<option value="">item-23</option>
<option value="">item-24</option>
<option value="">item-25</option>
<option value="">item-26</option>
<option value="">item-27</option>
<option value="">item-28</option>
<option value="">item-29</option>
<option value="">item-30</option>
<option value="">item-31</option>
<option value="">item-32</option>
<option value="">item-33</option>
<option value="">item-34</option>
<option value="">item-35</option>
<option value="">item-36</option>
<option value="">item-37</option>
<option value="">item-38</option>
<option value="">item-39</option>
<option value="">item-40</option>
</select>
<button>move to item 30</button>
I´m now beginning with programming and I need to know what text would be the value of this code. The JS code would be an "on click" event from this unfoldable list. Thanks you in advance!!
<select name="select1" data-dojo-type="dijit/form/Select">
<option value="Artesania">Artesania</option>
<option value="Banco" selected="selected">Banco</option>
<option value="Bar">Bar</option>
<option value="Bodega">Bodega</option>
<option value="Boutique">Boutique</option>
<option value="Discoteca">Discoteca</option>
var selectbox = document.getElementById('select');
selectbox.addEventListener('change', function(){
console.log(this.value);
//do whatever you want with the value
});
<select name="select1" data-dojo-type="dijit/form/Select" id='select'>
<option value="Artesania">Artesania</option>
<option value="Banco" selected="selected">Banco</option>
<option value="Bar">Bar</option>
<option value="Bodega">Bodega</option>
<option value="Boutique">Boutique</option>
<option value="Discoteca">Discoteca</option>
</select>
I have the following select drop down box:
<select name="selectcourier" required>
<option value="">Please Select</option>
<option value="collection">Collection</option>
<option value="Interlink">Interlink</option>
<option value="DespatchBay">Despatch Bay</option>
<option value="International">International</option>
</select>
What I want to do is if Interlink is selected a secondary select box appears below it and disappears if it unselected and another option is chosen instead. This is the second select drop down box.
<label>Select Shipping Courier:</label>
<select name="selectcourier" required>
<option value="1">Please Select</option>
<option value="2">Next Day</option>
<option value="3">2-3 Day</option>
<option value="3">Pre 12</option>
</select>
How can I go about getting this working?
bind an event with javascript on change and insert a new element in the DOM (the second select statement) like:
(provided you have jquery)
var secondSelect="your_html_here";
$("name='selectcourier'").change(function() {
if (this.val()=='Interlink') {
$('body').append(secondSelect); }
else {
$('#secondselectid').remove();
});
customise the html and where you want to append the second select
<script>
$(function(){
$('#s1').hide();
});
function call()
{
var check=$('#s2').val();
if(check=="Interlink")
{
$('#s1').show();
}
else
{
$('#s1').hide();
}
}
</script>
<select name="selectcourier" required onchange="call();" id="s2" >
<option value="">Please Select</option>
<option value="collection">Collection</option>
<option value="Interlink">Interlink</option>
<option value="DespatchBay">Despatch Bay</option>
<option value="International">International</option>
</select>
<label>Select Shipping Courier:</label>
<select name="selectcourier" required id="s1">
<option value="1">Please Select</option>
<option value="2">Next Day</option>
<option value="3">2-3 Day</option>
<option value="3">Pre 12</option>
</select>
You can use the above code to achieve your task
Just react on the event of changing the value of the first select.
If the value equals 'Interlink' display the second select - if the value is something else hide the second select.
<select name="selectcourier" required onchange="document.getElementById('interlink_addition').style.display = (this.value=='Interlink' ? 'block' : 'none')">
<option value="">Please Select</option>
<option value="collection">Collection</option>
<option value="Interlink">Interlink</option>
<option value="DespatchBay">Despatch Bay</option>
<option value="International">International</option>
</select>
<div id="interlink_addition" style="display:none">
<label>Select Shipping Courier:</label>
<select name="selectcourier" required>
<option value="1">Please Select</option>
<option value="2">Next Day</option>
<option value="3">2-3 Day</option>
<option value="3">Pre 12</option>
</select>
</div>
you can use ajax for this. write a ajax function to show second select box and call it on onChange event of the first select Box
I have a main drop down list which contains state names, when i select each state name i need to display the city names in a select box, but the select box name should be same because when i give different select box with same name the data is not storing in sql database. so i need to load the specific city names on each state select. any option
<option value="">Select your Location</option>
<option value="CHENNAI">CHENNAI</option>
<option value="GURGAON">GURGAON</option>
</select>
<select name="site">
<option value=""> Select Site </option>
<option value="City1"> City1</option>
<option value="City2"> City2</option>
<option value="City3"> City3</option>
<option value="City3"> City3</option>
</select>
<select name="site">
<option value=""> Select Site </option>
<option value="City1"> City1</option>
</select>
Demo
You can use prop('disabled', true / false); to manage which city to choose. You should not have 2 selects with same name, so because you need them in sql I made a fix for it. Notice also in your post you miss first <select> and "City 3" comes up 2 times.
html
<select name="state" id="sel_state">
<option value="">Select your Location</option>
<option value="CHENNAI">CHENNAI</option>
<option value="GURGAON">GURGAON</option>
</select>
<select name="site" id="CHENNAI">
<option value="">Select Site</option>
<option value="City1">City1</option>
<option value="City2">City2</option>
<option value="City3">City3</option>
<option value="City4">City3</option>
</select>
<select name="site" id="GURGAON">
<option value="">Select Site</option>
<option value="City1">City1</option>
</select>
jQuery
$(function () {
$("#sel_state").change(function () {
var a = $("#sel_state option:selected").text();
if (a == 'CHENNAI') {
$('#GURGAON').prop('disabled', true);
$('#CHENNAI').prop('disabled', false);
$('#GURGAON').prop('name', 'site_ignored');
$('#CHENNAI').prop('name', 'site');
}
if (a == 'GURGAON') {
$('#CHENNAI').prop('disabled', true);
$('#GURGAON').prop('disabled', false);
$('#GURGAON').prop('name', 'site');
$('#CHENNAI').prop('name', 'site_ignored');
}
});
});