Javascript/jQuery Dropdown menu update - javascript

I have two dropdown menus - when I select an option on the first I want the other to change to its corresponding option based on its matching value. I am currently using this JS code:
document.getElementById("select_1").onchange = function() {
console.log("select_1", this.options[this.selectedIndex]);
document.getElementById("select_75").value = this.options[this.selectedIndex].getAttribute("value");
};
However the end result does not change/update correctly unless I change manually the second (select_75) dropdown to another option and then back to the changed option (set by select_1).
Are there any changes I could make to the code or other setup entirely to try out in order make this happen? Open to using jQuery as well.

Related

Semantic UI multiple select dropdown - close event

I am trying to get the values selected in a multiple select dropdown - just once, because I am populating a cascading dropdown depending on the selected values in the original dropdown, and don't want to get data every time the user selects one value from the multiple select. Ideally I want to get the values after closing down the dropdown by clicking out of the dropdown or on the down arrow on the dropdown.
Does anyone know if there is an event for this? After searching online, I tried onClose, but that apparently is for React only, and also is not in the documentation (https://semantic-ui.com/modules/dropdown.html).
I have been looking for an answer since posting the question, and yes, I found a solution.
Using onHide, the values can be captured just once.
$('#ddlMultiple').dropdown(
{
onHide : function () {
//get the selected values here
}
}
);

Trying to add functionality to select option

In my program the user first enters some data to filter and the result goes to one dropdown select menu lets call this functionality function_1 . If there is only one result the it goes to make another query, lets call this function_2.
My problem here is when i have 2 or more results i should be able to:
1) check out the different options i get by clicking on the select to display all the options with a scrollbar if needed
2) After he saw the options there he clicks on one of them to activate function_2
The usual answers use the "change" event but, wont work if the user picks first default value because there is no change, he would have to pick an undesired result and go back to the first.
Using the click event on the select makes also unnecessary work because it triggers twice (one when i open the dropdown, other when option is selected)
Main problem here i think is the jquery selector, but im not sure if it can be done just with that.
This is an example of what im trying:
// function_1 in ajax
.done(result){
$.each(result.data,function (){
$('#select_ex').append("<option value...... ></option>");
if (result.count()===1){
$('#select_ex').trigger('change');
}
});
}
$('#select_ex option').change(function(){// tried with change, click or focus
function_2();
}
The html contains
<select name="select_ex" id="select_ex" size="0" ></select>
EDIT:
Not related to the duplicate question mentioned, since i already know why it doesnt select the option, besides it doesnt apply either since it only talks about connectors with ID, which is not even the point here (I could do my thing without IDs). Im asking for funcionality similar to ":selected" but with option->click.
Another workaround i thought of is filling the select with an empty/hidden field and set the selected property it, filtering afterwards and using the regular change event... but then the first item would be blank and doesn't seem very logic to me.
So I came to seek for any fresh ideas.
EDIT2
I added a white option for the multiple result and erased it afterwards by adding this line of code to imvain2 solution (where needed)
$("#select_ex option[value='0']").each(function() {$(this).remove();});
Although fixing your change function so that is is called for the select and not the option is important, your problem is the default selected option itself. As you mentioned, if they want the first option, they have to select something else to trigger the change function.
I would recommend adding a "blank" option as the first option and setting it as selected.
var $select_ex = $("#select_ex");
.done(result){
$select_ex.empty().append("<option value='0'>Select Your Ex Below!</option>");
$.each(result.data,function (){
$select_ex.append("<option value...... ></option>");
});
$select_ex.val("0");
}
$select_ex.change(function_2);

How can I show a hidden DIV for a selection included with others?

I have a javascript file that when called, checks to see if a particular option is selected on a form. The form allows for multiple selections before being submitted. When a particular item is selected within the given choices it shows a hidden menu. In this case with "audits" I am able to show the hidden menu fine when just "audits" is selected from the list. However, I'm having much difficulty in figuring out how to get the menu to show when "audits" would be selected/highlighted with others. Eg: I had audits, services, someotheroption
Below you can see the code I'm currently using and that's working only when the single item is selected. Any guidance would be much appreciated.
function toggleFields(){
function toggleFields(){
if ($("#installations").val() == "audits"){
$("#dbcredentialsfield").show();
}
else
$("#dbcredentialsfield").hide();
}
Using the code you have so far, I assume you probably want something like this:
$('#installations').on('change', function(){
$("#dbcredentialsfield").toggle($(this).val() == 'audits');
});
This says; when the select element (assuming your dropdown has the id of installations) changes, toggle the visibility of the element with id dbcredentialsfield depending on if the value of the select is audits or not.

How to interact with a custom select box with CasperJS?

When I visit a nike.com store page (test URL listed below) with my Casper script, I'm unable to change the value of the 'skuAndSize' select element. I am verifying this by checking the screenshot that is made after the supposed change. The code I am using to do it is:
// Add to cart
casper.then(function() {
this.fillSelectors('form.add-to-cart-form', {
'select[name="skuAndSize"]' : '3857923:9'
}, false);
this.capture("test.png");
this.click('button#buyingtools-add-to-cart-button');
});
Is there a better way to be handling this?
TEST URL: http://store.nike.com/us/en_us/pd/mercurial-superfly-fg-soccer-cleat/pid-1531739/pgid-1481200
I've looked at your link and the select box is hidden. It is replaced with markup which changes the select box under the hood, but the connection between the select box and the custom markup is one way. When you change the select box with JS, the custom markup is not changed.
If you only want to test the add-to-cart functionality, you can just keep it like you have it, because on submit the underlying select box data is used.
If you want to recreate the user interaction then you have to explicitly click this (untested):
casper.thenClick(".exp-pdp-size-and-quantity-container > .exp-pdp-size-container")
.wait(100) // little time to open dropdown
.thenClick(x("//div[contains(#class,'exp-pdp-size-dropdown-container')]/ul/li[not(contains(#class,'exp-pdp-size-not-in-stock'))][3]"));
This should select the third available size by using the CasperJS XPath utility.

How to change dropdown list label text on click?

I have a <select> element in my HTML that is bound via ng-model to an object in the scope.
Initially I want the dropdown to read "Group..." but when the user clicks on the control I want "Group..." to be renamed to "All" so that "Group..." can never be selected, in the same sense that sites use text boxes with default text that gives you a hint to what the form is for and disappears when it gets user focus (e.g. A "Search..." field).
Here is my JSFiddle example which isn't working as I expected: http://jsfiddle.net/TXPJZ/561/
I figured that ng-onclick="myOptions[0].label = 'All'" would work, it should change the value of the data structure that populates the dropdown and thus change the dropdown options but it doesn't.
How do I make this work like I want?
ng-click is the directive you want, not ng-onclick. Using that it seems to work the way you want it to:
http://jsfiddle.net/TXPJZ/562/

Categories