how to determine specific item to be selected in combobox with javascript - javascript

when I open the combobox via contextMenu, always the same item is selected.
How can I determine that one of the other items is selected?
For instance, there are 3 items "car1", "car2", "car3" and when I open the combobox "car1" appears in the list first. So how would I get e.g. "car2" appears in the list first?
Thanks very much!

if you mean a select element, you can change the order of items
<select id="list">
<option value="2">Car 2</option>
<option value="1">Car 1</option>
<option value="3">Car 3</option>
</select>
you could also set the default item with the selected attribute:
<select id="list">
<option value="1">Car 1</option>
<option value="2" selected>Car 2</option>
<option value="3">Car 3</option>
</select>

in JS you simply have to set the value of your select
const myForm = document.forms['my-form']
// set the select on the second cat
myForm.miaou.value = 'c2'
<form action="xxx" name="my-form">
<!-- other form elements -->
<select name="miaou">
<option value="c1">Cat 1</option>
<option value="c2">Cat 2</option>
<option value="c3">Cat 3</option>
</select>
</form>

Related

How to make an HTML attribute change depending on which option is selected

I am trying to make a button change when a certain option from a drop-down is selected.
document.getElementById("region").onchange = function() {
document.getElementById("order-btn").product-code = this.value;
}
<select name="option" id="option" required>
<option value="1234d1">Option 1</option>
<option value="amdk19">Option 2</option>
<option value="akd1sk">Option 3</option>
<option value="19sd91">Option 4</option>
<option value="asjd91">Option 5</option>
<option value="129e8j">Option 6</option>
</select>
<div class="btn-checkout">
<button id="order-btn" type="submit" product-code="">Checkout</button>
</div>
What I need to happen is when an option is chosen from the drop-down, the product code associated with that option is put into the product-code="HERE" on the button.
For example, If I chose Option 2 on the drop-down, its product code "amdk19" would then be put into the button like this:
<button id="order-btn" type="sumbit" product-code="amdk19">
I think this can be done with JavaScript, but I could not figure out how.
Thanks
Something like this should work! You can't set attributes on the object directly, like you tried -- instead, you have to use setAttribute on the button. You can use .value on the dropdown to get the value of the selected option.
document.getElementById("option").onchange = function() {
const btn = document.getElementById("order-btn");
// `this` refers to the dropdown, so you're getting the dropdown's selected value
btn.setAttribute("product-code", this.value);
}
document.getElementById("order-btn").onclick = function() {
// `this` refers to the button
console.log(this.getAttribute("product-code"));
}
<select name="option" id="option" required>
<option selected disabled>Select An Option</option>
<option value="1234d1">Option 1</option>
<option value="amdk19">Option 2</option>
<option value="akd1sk">Option 3</option>
<option value="19sd91">Option 4</option>
<option value="asjd91">Option 5</option>
<option value="129e8j">Option 6</option>
</select>
<div class="btn-checkout">
<button id="order-btn" type="submit" product-code="">Checkout</button>
</div>
As there are already answer to this. I would like to recommend you Jquery for easy dealing with javascript.
Include jquery cdn like this : Adding jquery CDN in HTML
Add id to your select and button. Adding Id in HTML
Then use jquery methods like this:
$("#optionsOfSomething").on("change",function(e){
$("#order-btn").attr("product-code",$(this).val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<select name="option" id="optionsOfSomething" required>
<option value="1234d1">Option 1</option>
<option value="amdk19">Option 2</option>
<option value="akd1sk">Option 3</option>
<option value="19sd91">Option 4</option>
<option value="asjd91">Option 5</option>
<option value="129e8j">Option 6</option>
</select>
<div class="btn-checkout">
<button id="order-btn" type="submit" product-code="">Checkout</button>
</div>

Get the value of Select dropdown list when the value sent by the form and that appearing in the dropdown list are different

I have a form which has the following Select dropdown list.
<select name="some_options" id="some_options">
#foreach(options as option)
<option value="{{$option->id}}">{{$option->value}}</option>
#endforeach
</select>
Here , the data are being sent from the database via the Controller
The Select data look like this
<select name="some_options" id="some_options">
<option value="opt001">Value 1</option>
<option value="opt002">Value 2</option>
<option value="opt003">Value 3</option>
<option value="opt004">Value 4</option>
<option value="opt005">Value 5</option>
</select>
Now, I have another disabled field which should get the value once the user changes the select option
<div>
<input type="text" id="some_options_cng" disabled>
</div>
My Javascript code
var opt = $('#some_options').val();
$('#some_options').on('change',function(){
opt = $('#some_options').val();
$('#some_options_cng').val(opt);
});
Now, the value in the <disabled> input field shows as
opt001 or opt002 and so on.
I want to show values as
Value 1 or Value 2.
How do I do it?
This code will work.
$('#some_options').change(function(){
var opt = $("#some_options").find(":selected").text(); //This line of code is
//important
$('#some_options_cng').val(opt);
})
$(document).ready(function(){
$('#some_options').change(function(){
var opt = $("#some_options").find(":selected").text();
$('#some_options_cng').val(opt);
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="some_options" id="some_options">
<option value="opt001">Value 1</option>
<option value="opt002">Value 2</option>
<option value="opt003">Value 3</option>
<option value="opt004">Value 4</option>
<option value="opt005">Value 5</option>
</select>
<div style="height:5px;"></div>
<div>
<input type="text" id="some_options_cng" disabled>
</div>

jQuery Select box multiple option get value and match values

I have same classname multi select box with same values in body, what I want if use chose value 1 from first or any select box then that value 1 on all other select box option will disable so user can't choose the same value in other multi select box.
<select name="mySel" class="myselect" multiple="multiple">
<option value="val1">option 1</option>
<option value="val2">option 2</option>
<option value="val3">option 3</option>
<option value="val4">option 4</option>
</select>
<select name="mySel" class="myselect" multiple="multiple">
<option value="val1">option 1</option>
<option value="val2">option 2</option>
<option value="val3">option 3</option>
<option value="val4">option 4</option>
</select>
This need to achieve via javascript or jQuery,
So you're likely going to get downvotes. You haven't actually shown that you've tried anything, you have only given us the HTML and asked that we solve your problem.
That said, I like to sink my teeth into easy problems, as this is. What you're wanting to do is, in each select, listen for the change event. When that triggers, get the value of the selected option, and disable any option with that value in any other selects. Take a look at the following:
$(function() {
/********
* Function to disable the currently selected options
* on all sibling select elements.
********/
$(".myselect").on("change", function() {
// Get the list of all selected options in this select element.
var currentSelectEl = $(this);
var selectedOptions = currentSelectEl.find("option:checked");
// otherOptions is used to find non-selected, non-disabled options
// in the current select. This will allow for unselecting. Added
// this to support extended multiple selects.
var otherOptions = currentSelectEl.find("option").not(":checked").not(":disabled");
// Iterate over the otherOptions collection, and using
// each value, re-enable the unselected options that
// match in all other selects.
otherOptions.each(function() {
var myVal = $(this).val();
currentSelectEl.siblings(".myselect")
.children("option[value='" + myVal + "']")
.attr("disabled", false);
})
// iterate through and disable selected options.
selectedOptions.each(function() {
var valToDisable = $(this).val();
currentSelectEl.siblings('.myselect')
.children("option[value='" + valToDisable + "']")
.attr("disabled", true);
})
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="mySel" class="myselect" multiple="multiple">
<option value="val1">option 1</option>
<option value="val2">option 2</option>
<option value="val3">option 3</option>
<option value="val4">option 4</option>
</select>
<select name="mySel2" class="myselect" multiple="multiple">
<option value="val1">option 1</option>
<option value="val2">option 2</option>
<option value="val3">option 3</option>
<option value="val4">option 4</option>
</select>
<select name="mySel3" class="myselect" multiple="multiple">
<option value="val1">option 1</option>
<option value="val2">option 2</option>
<option value="val3">option 3</option>
<option value="val4">option 4</option>
</select>
<select name="mySel4" class="myselect" multiple="multiple">
<option value="val1">option 1</option>
<option value="val2">option 2</option>
<option value="val3">option 3</option>
<option value="val4">option 4</option>
</select>
Edited the above code to support multiple selects. Actually, it wasn't so much an issue of multiple selects, as I was doing a very lazy handling of unselecting options. Now, when the user is selecting or de-selecting options in any select, only the non-disabled options in that select are used: the (":checked") to disable that option in all other selects, and the .not(":checked") to re-enable any options that the user has somehow unselected.
Try this code , it should do the job:
using Not selector and for each to iterate on other select options:
$(document).ready(function() {
$('.myselect:first').change(function() { // once you change the first select box
var s = $('.myselect:first option:selected').val(); // get changed or clicked value
others = $(':not(.myselect:first) >option'); //select other controls with option value
others.each(function() {
if (this.value == s) // for example if you click on 1 the other controls will get 1 disabled
$(this).attr('disabled', 'disabled').siblings().removeAttr('disabled');
// remove disabled from others if you click something else
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="myselect" multiple="multiple" name="mySel">
<option value="val1">option 1</option>
<option value="val2">option 2</option>
<option value="val3">option 3</option>
<option value="val4">option 4</option>
</select>
<select class="myselect" multiple="multiple" name="mySel">
<option value="val1">option 1</option>
<option value="val2">option 2</option>
<option value="val3">option 3</option>
<option value="val4">option 4</option>
</select>

Adding Hidden Attribute To Select Option Based On Option Value

I'm trying to create a working function that will hide specific select options based on certain values. The options will not have a class or id so I need to use the option value as an identifier.
Does anyone see a problem with this function?
function delivery_rate(valMap) {
if(valMap === 5000){
$(".addon-select option[value="1-day-1"]").setAttribute("hidden", true);
}
}
Instead of applying hidden on the options tag, create different versions of <select> and set all to be hidden. When a user selects a value that matches the criteria of that <select> tag, show that specific tag.
<select name="select" class="first-select">
<option value="value1">Value 1</option>
<option value="value2" selected>Value 2</option>
<option value="value3">Value 3</option>
</select>
<select name="select" class="second-select">
<option value="value4">Value 1</option>
<option value="value5" selected>Value 2</option>
<option value="value6">Value 3</option>
</select>

How To Set All Choice/Select Dropdown

I have a global select box on the page that I want to use to set all of the other select boxes on the page. They all have the same options in them.
So when I change the global drop down, how do I set all of the other ones to the same value.
All of my other select boxes have an id that starts with "inventory_location_select_"
$("#global_location").change(function(){
var globalValue = $("#global_location").val();
$("input[id^=inventory_location_select_]").val(globalValue);
});
Here is my html:
Main Select Box:
<select id="global_location">
<option selected="selected">Choose Option</option>
<option value="3542">Acme Pos 1</option>
<option value="3545">Acme Pos 2</option>
<option value="4892">Acme Test 1234567890</option>
<option value="4896">FBA CA Prep</option>
<option value="4889">FBA Prep 1</option>
<option value="4895">FBA Prep 2</option>
<option value="4897">FBA Prep 3</option>
<option value="4893">POD 3 Area 1</option>
</select>
One of my other boxes:
<select id="inventory_location_select_1">
<option>Choose Option</option>
<option value="3542">Acme Pos 1</option>
<option value="3545">Acme Pos 2</option>
<option value="4892">Acme Test 1234567890</option>
<option value="4896">FBA CA Prep</option>
<option value="4889">FBA Prep 1</option>
<option value="4895">FBA Prep 2</option>
<option value="4897">FBA Prep 3</option>
<option value="4893">POD 3 Area 1</option>
</select>
This seems so easy, I just cant figure it out.
The selector is wrong, you are trying to select input elements:
$("select[id^=inventory_location_select_]").val(globalValue);
Change:
$("input[id^=inventory_location_select_]").val(globalValue);
to
$("[id^=inventory_location_select_]").val(globalValue);
Your elements are selects, but you tried to change inputs. Either way you don't need to necessarily specify them. If you need to, use $("select[id^=inventory_location_select_]").val(globalValue);
jsFiddle example

Categories