I have a select field with the id being node_service_area_city. I wish to clear this dropdown using jquery. For the same I have the following code:
$("#node_service_area_city").empty();
When this line is commented I can chose any of the options in the dropdown. When the code is run with this line included then the options in the dropdown are STILL THERE but I cannot chose any of them. Nothing happens if I click on any of the options.
As such I feel that the dropdown menu is empty but somehow the dropdown items are still showing so I might have to refresh the page. Someone please guide me as to why this is happening and what can I do about it.
can you try this :
$('button').click(function () {
$("#node_service_area_city > option:first-child").prop("selected","true")
});
Related
My question is related to Angular and Typescript. My problem is quite tricky. I've created a dropdown menu with 3 items. But I'm not creating it using select tag of HTML. I'm using my company's toolkit. Which is just a wrapper around primeng components with our font and our color scheme. They call it PLK toolkit. Their code have a bug. It is not clearing the previously selected item. Here is their sample dropdown code (i feel it is ok to share the code because it is few lines of plain html only and that too written by me):
Note: In below code, plk-dropdown is like select tag, while plk-option is like option tag. There's nothing special about it.
<plk-dropdown [(ngModel)]="fruit" name="fruit">
<plk-option [value]="'apple'">Apple</plk-option>
<plk-option [value]="'pear'">Pear</plk-option>
<plk-option [value]="'melon'">Melon</plk-option>
</plk-dropdown>
So, when I click it first time it is good.But after first click it keeps on selecting the other options along with previous. I looked into their code:
dropdown.js
DropDownComponent.prototype.writeValue = function (value) {
if (this.options) {
this.selectOptionByValue(value);
}
};
and I fixed this bug by adding 1 line of code:
DropDownComponent.prototype.writeValue = function (value) {
if (this.options) {
this.clearSelectedOptions(); // THIS I ADDED
this.selectOptionByValue(value);
}
};
Now the compoenent is working but the problem is that I can't make changes to their js file. Firstly, I'm not supposed to do so. Secondly, if in future we update our repositories, that bug will come back.
Is there any way I can fix this with my typescript code. I cant implement jquery in between. I tried this:
How to clear all selected items in a SELECT input using jQuery?
Please help me. I'm blocked because of this. I really need help.
I use a null option so when the dropdown has no values unselected option is selected , I thing it 's related to primeng the set the first option as selected even the value don't match with ngModel property I have create a demo to show this but so far that how we solve abd this will give to the use an option to undo the selection in case this was not required.
<plk-dropdown [(ngModel)]="fruit" name="fruit">
<plk-option [value]="null">Unselected</plk-option>
<plk-option [value]="'apple'">Apple</plk-option>
<plk-option [value]="'pear'">Pear</plk-option>
<plk-option [value]="'melon'">Melon</plk-option>
</plk-dropdown>
demo 🚀
I'm using Bootstrap Multiselect (https://github.com/davidstutz/bootstrap-multiselect). It's a great component but i'm having the issue described below.
Let's say i have a select with id 'select-status' with 10 options and i want the app opens by default with the first 3 options selected. For this i'm using this code :
$(function () {
$('#select-status').multiselect('select','1');
$('#select-status').multiselect('select','2');
$('#select-status').multiselect('select','3');
});
I can see the code above works because the 3 options appear checked when i load my application.
The problem is, when i submit the form, only one option is being posted, UNLESS i manually click on the select dropdown to show the options. Only by doing this and not even clicking in any option, the form will post correctly, with the 3 selected options.
I assume that probably i need to do some code after i select the options programatically.
Any hints ?
Thanks !
What if you use an array of values instead?
$('#select-status').multiselect('select', ['1', '2', '3']);
It would be interesting to see the rest of your markup too, though. And also hear what you use to grab the data.
This question already has an answer here:
Reset values from jQuery Mobile
(1 answer)
Closed 8 years ago.
I've been trying all day to figure this out, and it seems simple enough, but how can I clear (not remove) all the selections from a group of select option drop downs at once? I want them set back to their default state when the div was first loaded. I can't use .reset because there will be other information in the form that I need to gather, but I need to allow users to change their minds without penalty (having to fill the form out all over again).
This SO question shows you how to remove the options which isn't what I need.
This SO question seemed to give the answer, but I haven't been able to get it to work.
And this jQuery bug entry seems to imply that it can be done with .empty(), but that doesn't work either.
This SO question lists a bunch of different ways to do exactly what I want, and I've tried all of them (see code below), none worked. I'm obviously missing something.
Here's a JSfiddle with the problem.
How to view the problem in the fiddle:
At Repair Status, click on Repaired; two new inputs are shown, a set of radio buttons and then select-option drop downs for each. Under Category, choose Part Quality, then choose any item from the drop down. That choice should now show up in the drop down. Now click on any one of the other Categories, and then back to Part Quality. The same choice you just made will still be shown instead of the default of "Select Part Quality Reason", which is what I want.
My attempts have focused largely on the Part Quality radio button for proof of concept, but the production code needs to clear all of the entries from all of the option-selects in the form except the Reporting Department drop down. Preferably I can use a generic selection with a $(this) construct, but that's not required. Something like this:
$("select option:selected").each(function () {
$(this).val(''); //doesn't work
});
Requirements:
When the user chooses a different radio button (Category), all of the option select drop downs will be reset to their default states. That way when the user makes their final choice & hits Submit, there are no extraneous entries. When they change their choice of Category, the underlying code must preserve the Reporting Department drop down choice.
I can then gather all the bits and pieces of their choices to be placed into a JSON string for an AJAX call to my code-behind and insert the data into a MySQL database.
I don't care if the answer uses jQuery or just plain JavaScript, I can use either happily.
Here's a bunch of attempts that haven't solved it yet:
$("#formEvent_repair input[type='radio']").on('change', function () {
//$("#select_part_quality_repair option:selected").attr("selected", false);
//$("#select_part_quality_repair").find('[selected]').removeAttr("selected");
//$('#select_part_quality_repair').attr('selectedIndex', '-1');
//$('#select_part_quality_repair').val(null);
$("#select_part_quality_repair").find('option:first').attr('selected','selected');
//$("select option:selected").val([]);
//$("select option:selected").html('');
//$("select_part_quality_repair").html('');
$("select_part_quality_repair").append().html('');
$("select option:selected").each(function () {
console.log("Emptying select options");
$("#select_part_quality_repair").find('option:first').attr('selected','selected');
//#select_part_quality_repair-button > span
//$("#select_part_quality_repair").prop('selectedIndex', -1);
//$("#select_part_quality_repair").find('option').attr("selected", false);
//$("#select_part_quality_repair option").attr("selected", false);
$("#select_part_quality_repair option:selected").attr("selected", false);
console.log(this);
$(this).val([]);
});
Because you are using jquery mobile you need to issue a refresh command to the elemnt that you change.
$('#select_part_quality_repair').val('').selectmenu('refresh');
This will deselect any option and then refresh the layout to show the change..
For radio buttons you set in code use
$(<radio-button-selector>).checkboxradio("refresh");
You clear a dropdown selection like this:
$("#select_part_quality_repair").val("");
That will clear the selection without removing the members.
Also, this line in your code is improperly formed:
$("select_part_quality_repair").append().html('');
You forgot to put the "#" before the element ID, as is required by JQuery. That line won't help you anyway, so you should not even bother with it.
Cheers,
-=Cameron
Unchecked all radio button
$(".clear").click(function(){
$('input:radio').each(function () {
$(this).removeAttr("checked");
});
});
EDIT 2 :
Unselected all options
$(".clear").click(function(){
$('select').each(function () {
$(this).removeAttr("selected");
});
});
I am creating a JSP page which has few fields for searching.
I am facing 2 issues.
1) The search button should be disabled until at least one field is not empty. The form has mixed type of fields(few text boxes, drop downs, etc). I have tried few things but the button is not disabling.
2) Second issue is the search result is being displayed in the same page. I am displaying the search result in a table inside a div. I am trying to hide this table until the user doesn't click on search. I have tried doing this by setting a flag in my controller but it's not working.
I have tried using javascript and JQuery for these but for no avail. Pls help!!
Edit 1:
I have used something like:
$(document).ready(function(){
$('input[type="submit"]').attr('disabled','disabled');
$('input[type="text"]').change(function(){
if($(this).val != ''){
$('input[type="submit"]').removeAttr('disabled');
}
});
});
But when I'm using this, the drop downs are not being populated with model object.
$('#yourFormId > *').filter(':input[value!=""]').length will return the number of form fields that are not empty.
Im not sure what you want to do with the table though, seems like you should just be able to set display:none on the table and use the jQuery css function to change it when the user clicks.
Posting a code sample would help :)
I'm kind of new when it comes to programming but am trying to learn.
What I need to do for my site is have 2 or 3 linked drop-down menus so when I select an item from the first one, the second one will refresh with other options. I have found a way to do this using Java but I cannot seem to make it with the refresh div part.
I looked up prototypejs/updater but it is a bit over my head and cannot seem to link it with the JavaScript I used for the drop-down menus...
So if anyone can tell how I can link two, maybe 3 drop-down menus and after if I click an option from the last menu make a div from the page refresh with other content please help :)
Try a search on google for dynamic select boxes, it's plenty of examples, choose the less complicated one that best fits with your knowledge.
The principle is to link a function to "onchange" event that the select box fires when an item is selected.
Assuming this select box:
<select id="select1" name="option">
</select>
the javascript fragment is:
var sel1 = document.getElementById("select1");
sel1.onchange = function() {
//do whatever you want
};
For the first and the second select, the function will load other select's options, while in the third case it will show your div
Not 100% sure what you are after - but I think this should get you at least some of the way:
http://remysharp.com/2007/09/18/auto-populate-multiple-select-boxes/
It's a jQuery plugin for linking select boxes together, using Ajax to load the data to populate the next box in the chain based on the value selected in the previous.
You'll then still need to link the last box with the div - but you should be able to do it with a similar method yourself - see the jQuery Ajax documentation.
http://docs.jquery.com/Ajax