Issue in Dynamically Add Select Element In J Query Mobile - javascript

I am adding select element dynamically on the change event of another select when I first click on static select then dynamically Select shown on page with all of its options but when I again select different value from static select the dynamic select shown on page but with no options?
Here is my demo page

The solution is to add $('#exerciseList-dialog').remove(); inside the loadExerciseList function.
Basically this line removes the dialog from DOM when you change category.
I hope this helps.

Related

Problems selecting an option with dynamic ID

I'm facing an issue while handling dynamic IDs using the Cypress Automation tool. I have provided the statement below to tick/select the checkbox.
DOM
Error
I need to click on the options, and if I put it by ID it fails because it's dynamic.
I need to click on the options, and if I put it by ID it fails because it's dynamic.
After opening the dropdown, use the text of the option to select it
cy.get(selector-for-dropdown).click() // open dropdown
cy.contains('[role="option"]', 'Supervisor').click() // select an option by text

jQuery clone select list remove selected

I have a button that is cloning an element on the page each time the user clicks it. It is duplicating a select list for them to choose another option.
However, its cloning the whole element including the option that was selected so all of the new ones appended have a default value which I dont want.
globalLocales = $("<div />").append($('[name=localeID]:first').clone()).html();
$('select').select2();
Is there a way I can remove the selected option during the cloning process so it doesn't carry over to the new element?
I tried using .removeProp('selected') in the append as well as .prop('selected',false); but that didn't work for me
One way to fix the proble is to select a nonexistent value:
$("<div />").append($('[name=localeID]:first').clone().val(-1)).html();
Or you can find selected option and remove selected attribute:
$("<div />").append($('[name=localeID]:first').clone()
.find(':selected').removeAttr('selected').end()).html();
but this is a little clumsy.
you can remove the selected attribute with this code.
$('[name=localeID] option:selected').removeAttr('selected');

Chosen jQuery framework select option from dropdown with Javascript

I'm using the Chosen jQuery framework with a basic select statement.
I use the following line of code to open the dropdown:
$('#<id-of-your-select>_chzn').trigger('mousedown');
That statement opens the Chosen dropdown.
Then I want to select the top item which is a li element with the id: pt_chzn_o_1.
I've tried the following, but none of them will select the option.
$('#pt_chzn_o_1').trigger('mousedown');
$('#pt_chzn_o_1').click();
How do you select an option using Javascript/jQuery as if I clicked the top option with my mouse.
Why don't you just change the selected index instead? It seems like you are trying to achieve the same thing but go about it in the "human way" as oppose to the "programming way", like so:
$('#<id-of-your-select>').val('value-of-pt_chzn_o_1').trigger('chosen:updated');
Make sure to change both the jQuery selector and the value to match your circumstances.
This is what ended up working for me:
The initial click triggers an event to show additional fields(optional, only needed in my specific case).
$("#<id-of-your-select>_chzn").trigger("click")
This statement opens the Chosen dropdown:
$("#<id-of-your-select>_chzn").trigger("mousedown")
Execute this statement on the li element id of the chosen dropdown element you want to choose.
$("#pt_chzn_o_1").trigger("mouseup")

jQuery .prop("disabled",true) not working

I have a dropdown that loads the data and there is a Add button and when the add button is being triggered it will be disabled. It works in the first load, but when the dropdown is onchange the disabled button will be false or not disabled. So how can I still disable the button when the dropdown is being changed. I have also a input field to store the values of the button that has been clicked. Check http://jsfiddle.net/leonardeveloper/qy9u5/.
Problem is, you are appending a new element every time your <select> is changed. You need to be showing and hiding the same respective table each time. You can use jQuery to create those tables using the <option>s. Like so:
$("#loads option").each(function(){
thisNumber = this.value;
$("#displays").append("<table data-table="+thisNumber+"><tr><td>"+thisNumber+"</td><td>"+thisNumber+"</td><td><button class='materialId' value='"+thisNumber+"'>Add</button></td></tr></table>");
$("#displays table").hide();
});
We append the tables (2 in this case) to #displays, and then hide them. When we change the <select> now, we hide all tables, and show the one we selected, I've used data-table for this but there are many ways to target your specific table.
$(document).on("change","#loads", function(){
$("#displays table").hide();
$("#displays table[data-table="+this.value+"]").show();
});
JSFiddle
Try to bind click event also.
Demo
$(document).on("change click","#loads",...

How to change the dropdown list value in javascript?

i have this dropdown list,
a,b,c,
and 2 radio buttons rdbButton1 and rdbButton2.WHen i click on rdbButton1 dropdownlist will appear and when i click on rdbButton2 i have to set dropdownlist value as a.how can i change dropdownlist value (i want to change it in javascript or jquery)
$('#id_of_the_option_element').val('new_value');
$('#id_of_the_option_element').html('new_caption');
$('#id_of_the_option_element').attr('selected','selected');
search how autoid works by searching "autoID asp.net" on google. This may help, too.
http://msdn.microsoft.com/en-us/library/system.web.ui.clientidmode.aspx
you should go to the source view to check how the ID's of the html elements change.

Categories