I am trying to swap all the options between two Harvest Chosen select boxes. The scenario is I want to record details of a phone call. The call can either be inbound or outbound. If the call is outbound the I populate a select box (caller) with a list of possible values of those users that can make outbound calls and a second box (callee) with a list of possible values of those users they can make calls to. If the user updates the call type to be inbound then I want to swap the select boxes around so that the callee's are in the caller box and vice versa.
I very nearly have this working except each time I change the call type it keeps appending the values onto the end of the select options in each respective caller/callee select rather than completely clearing them and replacing all values.
Would appreciate some help as to why this is happening.
See http://jsfiddle.net/RyHFK
HTML
<label for="call_type">Call Type:</label>
<select name="call_type" id="call_type" class="chosen">
<option value="OUTGOING">Outgoing</option>
<option value="INCOMING">Incoming</option>
</select>
<label for="caller">Caller:</label>
<select name="caller" id="caller" class="caller chosen">
<option value="Caller 1">Caller 1</option>
<option value="Caller 2">Caller 2</option>
<option value="Caller 3">Caller 3</option>
<option value="OTHER">Other</option>
</select>
<label for="caller">Callee:</label>
<select name="callee" id="callee" class="callee chosen">
<option value="Callee 1">Callee 1</option>
<option value="Callee 2">Callee 2</option>
<option value="Callee 3">Callee 3</option>
<option value="OTHER">Other</option>
</select>
The way it's written, you are appending to the same arrays every time there is a change. Move your calleeOptions and callerOptions variables inside your change handler:
// on call type change
$('#call_type').change(function(){
var callerOptions = [];
var calleeOptions = [];
Here's a jsFiddle.
Related
I'm learning JS and can't seem to be able to make this one work:
HTML code:
<select name="colors">
<option value="">--Please choose an option--</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
JS:
var select = document.getElementsByName("colors")[0];
console.log(select.value); // ==> it should output selected color but is not.
Since you didn't post the full code, I'd suppose that you're running your JS code before the select element is being loaded (if your script is in the headsection for example).
Anyway, I'll provide some work arounds for this purpose and at the end of the answer I'll show you how to get the selected value whenever the selected item from the list has changed.
encapsulate your code in load event of the window :
<!-- just to simulate when your JS is placed in the head section -->
<script>
// attach a "load" event listener to the "window"
window.addEventListener('load', () => {
// select the "select" element
var select = document.getElementsByName("colors")[0];
// log its initial selected value. Here as we didn't explicitly assign the "selected" attribute to an "option", the first "option" value will be printed.
console.log(select.value);
});
</script>
<select name="colors">
<!-- for demonstration, I changed the value to some string rather than an empty one so we could know something has been printed in the "console" -->
<option value="acting like Im empty :)">--Please choose an option--</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
place your code just before the body closing tag hence no need to listen for the load event
var select = document.getElementsByName("colors")[0];
// log its initial selected value. Here as we didn't explicitly assign the "selected" attribute to an "option", the first "option" value will be printed.
console.log(select.value);
<select name="colors">
<!-- for demonstration, I changed the value to some string rather than an empty one so we could know something has been printed in the "console" -->
<option value="acting like Im empty :)">--Please choose an option--</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
Anyway I think that your final goal is to get the selected value whenever the selected item is being changed :
// select the "select" element
var select = document.getElementsByName("colors")[0];
// attach a "change" event listener to the "select" element
select.addEventListener('change', () => {
// log the selected value whenever it changes
console.log(select.value);
});
<p>choose an option from the list first</p>
<select name="colors">
<!-- for demonstration, I changed the value to some string rather than an empty one so we could know something has been printed in the "console" -->
<option value="acting like Im empty :)">--Please choose an option--</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
BTW, I don't recommend selecting elements based on their name attributes, using classes or IDs (if the element is unique in the page or has unique functionnality) would be a better choice.
Also, using getElementsBy* (Elements not just Elment) methods is not recommended in most situations, querySelector or getElementById(for unique elments) is better.
you should create a id of that value then use const example = document.getElementById("id")
the var should be changed to const;
and the name is the string not the value
and always use id;
Try this..
function myFunction(){
var e = document.getElementById("MySelectOption");
var strUser = e.options[e.selectedIndex].value;
console.log(strUser);
}
<select id="MySelectOption" name="colors" onchange="myFunction()">
<option value="">--Please choose an option--</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
Very simple example : https://jsfiddle.net/x6z6w0n8/8/
How can I set selected values on Initialization step without creating duplicate?
Sample from off site works well. https://jsbin.com/yupinelefa/edit?html,js,console
As I noticed, in off-example they don't initialize select, they just use event onInitialized. But when I initialize (set options) to select in onInitialized event then nothing is changed, I also have 2 selects.
In general - I have bootstrap-multiselect on page. OnInitialization I want to set selected values in it.
I have next code as example :
<select id="example-onInitialized" multiple="multiple" class="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
$('.multiselect').multiselect({
onInitialized: function(select, container) {
$(select).multiselect('select', 2); // I want to select item with value '2'
}
});
But this script creates one additional select. So as result I have one select with selected value '2' and one empty select.
For me it seems like every call of .multiselect() will create new select. Is it right? Thanks.
Updated fiddle.
That happen because select is an option that should be called always on .multiselect() (that initialize the plugin), so in your case your plugin will be initilized for the second time when you will use it.
onInitialized() is a function which is triggered when the multiselect is finished initializing.
The select option is made to select also the given values after initialization of the plugin, so you could just use it like :
$('.multiple').multiselect('select', 2);
Hope this helps.
I have a page with multiple dropdowns and I want to disable multiple options in all of those dropdowns.
The options I aim to disable share certain characteristics, namely that they're identified with two classes each. Many of the options in all the lists share the same classes and I want to add several buttons that enable or disable options based on those classes.
My issue is, that the standard ways I have seen here target options
by select element
by number.
But mine are dynamically generated and the options that I'm trying to disable are not always next to each other.
Here's a snippet of one of the dropdowns:
<select name="m1">
<option value="Abyss Guard, Cereberus" class="Covert Beast">Abyss Guard, Cereberus</option>
<option value="Abyss Guard, Cereberus+" class="Covert Beast">Abyss Guard, Cereberus+</option>
<option value="Achlis+" class="Covert Beast">Achlis+</option>
<option value="Adept Devil+" class="Impulse Demon">Adept Devil+</option>
<option value="Agares+" class="Covert Demon">Agares+</option>
<option value="Airship of Death+" class="Psycho Creation">Airship of Death+</option>
<option value="Ancient Huge Statue+" class="Psycho Creation">Ancient Huge Statue+</option>
<option value="Anna Thorn Maiden" class="Impulse Demon">Anna Thorn Maiden</option>
<option value="Anna Thorn Maiden+" class="Impulse Demon">Anna Thorn Maiden+</option>
<option value="Anomalocaris+" class="Impulse Beast">Anomalocaris+</option>
<option value="Apopisu of Chaos+" class="Psycho Beast">Apopisu of Chaos+</option>
<option value="Arachno Chi" class="Psycho Crawler">Arachno Chi</option>
<option value="Arachno Chi+" class="Psycho Crawler">Arachno Chi+</option>
<option value="Arbitration Demon+" class="Psycho Demon">Arbitration Demon+</option>
<option value="Armored Black Tiger+" class="Impulse Beast">Armored Black Tiger+</option>
<option value="Armored Bucephalus+" class="Covert Beast">Armored Bucephalus+</option>
</select>
This is by no means an exhaustive list, there's a couple of hundred options for each dropdown, though all the dropdowns contain the same list. As you can see, the list is sorted alphabetically, not by class.
I am looking to disable and enable options with a button based on one of the two classes, and a disabled status should override an enabled status. The standard document.getElementById('m1').options[number].disabled doesn't really help me here as the list is dynamically generated and I do not know where a specific option will end up.
Part of the site's aim is to minimize the amount of reloading needed and at the same time minimize the amount of javascript being executed, to speed up responsiveness. Is there a way I can select all options in all of the dropdowns that are of any specific class?
Here's one way of doing it. If you have that many options and they don't change, consider caching the result of document.querySelectorAll so that you don't have to find all the options again each time you want to disable/enable them.
http://jsfiddle.net/uj86d/
HTML
<select>
<option value="test1" class="red">Test 1</option>
<option value="test2">Test 2</option>
<option value="test3" class="red">Test 3</option>
<option value="test4">Test 4</option>
</select>
<select>
<option value="test1">Test 1</option>
<option value="test2" class="red">Test 2</option>
<option value="test3">Test 3</option>
<option value="test4" class="red">Test 4</option>
</select>
<button>Disable reds!</button>
JS
//disable all options with a red class
document.querySelector('button').addEventListener('click', function () {
var redOptions = document.querySelectorAll('option.red'),
i = 0,
len = redOptions.length;
for (; i < len; i++) {
redOptions[i].disabled = true;
}
});
UPDATE: I was trying lots of different methods for doing this and none of them worked... until... I changed my dropdown menu name from (date-range) to (dateRange) removing the (-), sorry for wasting time!
I have a search form and a custom reset form button, which resets all the values in the form. I now have a dropdown menu and when the reset button is pressed, I want the first option to be selected.
This is my form:
<select name="date-range" id="date-range">
<option value="Any">Any date</option>
<option value="Today">Today</option>
<option value="Yesterday">Yesterday</option>
<option value="1 Week">Within 1 Week</option>
<option value="1 Month">Within 1 Month</option>
<option value="3 Months">Within 3 Months</option>
<option value="6 Months">Within 6 Months</option>
<option value="1 Year">Within 1 Year</option>
</script>
... and this is my javascript function that now needs to select the first dropdown value "Any".
function resetSearchForm()
{
document.searchFrm.searchStr.value='';
document.searchFrm.vertical.checked = true;
document.searchFrm.horizontal.checked = true;
** dropdown select first **
}
What is the proper way to do this? Any help gratefully received :)
This will work:
document.getElementById('date-range').selectedIndex = 0;
Example can be found here:
http://jsfiddle.net/yPmmG/3/
No javascript required, just add the selected attribute to the first option. That's what the attribute is for.
<option selected value="Any">Any date</option>
It is recommended that all select elements have one option with the selected attribute, that way there is always one selected by default. It will be the selected option when the page first loads and if the form is reset.
Here is the issue.
I have a select dropdown list.
<select name="listingtype" id="speedD" style="width:210px;">
<option>For Sale</option>
<option>For Rent</option>
</select>
And another select drop down list where the prices appear , which on page load it is empty..
So if user clicks For Sale: then the other select drop down list, loads price list like so:
<select name="valueA" id="speedF" style="width:200px;">
<option value="Any" selected="selected">Any</option>
<option value="50000">$50,000</option>
<option value="100000">$100,000</option>
<option value="150000">$150,000</option>
<option value="200000">$200,000</option>
<option value="250000">$250,000</option>
And if they choose For Rent. Select drop down is propagated like so:
<select name="valueA" id="speedF" style="width:200px;">
<option value="Any" selected="selected">Any</option>
<option value="100">$100</option>
<option value="150">$150</option>
<option value="200">$200</option>
<option value="250">$250</option>
<option value="300">$300</option>
</select>
I need this code to be client side, no need for server side. And just wanted to know what the cleanest method for doing this is.
Cheers.
First of all I recommend setting the value attribute in your option elements.
Example:
<option value="sale">For sale</option>
<option value="rent">For rent</option>
If you have not already heard of or seen the JavaScript library known as jQuery I strongly recommend checking it out! It can be very helpful when creating a dynamic site like this using minimal JavaScript.
I would do something like the following:
<html>
...
<body>
<div id="fillme"></div>
<script type="text/javascript">
if (document.yourformname.listingtype.value == "sale") {
//it is for sale
$('#fillme').html('<select name="valueA" id="speedF" style="width:200px;"><option value="Any" selected="selected">Any</option><option value="50000">$50,000</option><option value="100000">$100,000</option><option value="150000">$150,000</option><option value="200000">$200,000</option><option value="250000">$250,000</option></select>');
} else {
//fill it with the other elements
}
</script>
</body>
</html>
Now of course you could load it more dynamically with JSON or XML but that is up to you. I really recommend checking out the library:
http://jQuery.com
Use JavaScript to fill the empty select with options when the user selects an option (either onchange or onselect, forget which) in the For Sale/For Rent select.
EDIT: More specifically, have that second box be empty when the page loads. Store the options in arrays. Use a loop to create new OPTION elements based on each array item.