How do I set a dropdown option by value using jquery? - javascript

I have a fiddle that has some slight demo code: http://jsfiddle.net/mwoods98/MHrJJ/
I have a request that is being sent via ajax and it's returning some values via JSON.
With that, I'm taking what is returned and filling in a form. I'm filling in the form
with the other values but I can't quite figure out how to set the dropdown to a value that is returned.
$('#PosTitle').find('option:eq(PosVar)').val().prop('selected', true);
I have tired this and it doesn't work. PosVar is a variable that I'm setting to a number that is returned from ajax.
UPDATE: Thanks for both of the answers, I have discovered something.
I'm using this code to make the drop downs look better but also I need a drop down that can have multimple lines of HTML.
http://www.marghoobsuleman.com/jquery-image-dropdown
When I remove this js, the form fills in.
I'm open to using another library that gives me the ability to use multiple rows in a select dropdown and pass HTML to it.
Thanks for the answers.

All you need is:
var PosVar = 9;
$('#PosTitle').val(PosVar);
jsFiddle example

Remove the .val()
$('#PosTitle').find('option:eq(PosVar)').prop('selected', true);
.val() will not return this object .. So you cannot chain it further..
jsFiddle

Related

Callback Function .html(), and .val() together possible?

back again! been a while.
So this is my question.
I have a datatable set up that gets the information from the database and shows this in a modal (bootstrap4).
That works fine by the way, but now I wan't to add a dropdown option.
This dropdown needs to have information that is stored in the database (just one table with all the rows).
success:function(data){
$('#Modal').modal('show');
$('#Id').val(data.id);
$('.number').html("<select><option>".val(data.number)"</option></select>");
$('#skills').val(data.skills);
$('.modal-title').html("<i class='edit'></i> Edit ");
$('#action').val('Data');
$('#save').val('Save');
}
as you can see I tried to do this little trick but sadly it didn't take so I was wondering if something like this is even possible?
Thanks so much for the help/info.
Assuming that your modal already contains a select box in a .number div with several options in it then the following would add the extra option into it, generated from the data object:
$('.number select').append(`<option value="${data.number}">${data.number}"</option>`);

Appending a tail-select option maintaining the functionality

Created a select tag using jquery tail module: https://github.com/pytesNET/tail.select
I want to append a new option input taken from the user.
Using nodejs for this local server to automate file movement.
tail.select(".selectBox_custom",{placeholder:"Add custom"});
$("#idofselect")[0].options.add("New Option",true);
I expect to see the newly added option post this action. Whereas, the html source shows the new option but is not visible on tail select element on browser. Also, I don't believe that the functionality of multiple select is also added if somehow I could get the element to be displayed.
Also tried with following documentation, but could not get a clear demo:
https://github.com/pytesNET/tail.select/wiki/public-methods#addkey-value-group-selected-disabled-description-rebuild
As can be seen in documention you had provided:
This function will NOT rebuild the dropdown field, unless you pass
true as last argument!
So. it means that you have to provide true to your add() method call. Smth like this:
$("#idofselect")[0].options.add("New Option",true, false, false, false, '', true);
---==== EDIT ===---
I was able to add new option to tail select following documentation you had provided. I would suggest you to use for all select manipulations instance variable, it is going to save your debugging time and your code became more cleaner and readable. Here the sample fiddle.
Hellow,
It's not documented, but it's highly recommended to fill in the first both arguments on the options.add() method (so the key and value, even if it is the same). To update the dropdown field, you can use the tail.select.query() method on your own.
I wrote a small CodePen to demonstrate this.
Sincerely,
Sam, Developer of tail.select.

select2 change selection programmatically

I've got a select2 selection that I'm trying to set the value for using javascript.
I've created a fiddle at this address.
https://jsfiddle.net/rfeynman/wn9v3bud/
I'm trying both he following
// method 1
$('#groupList').select2('data',{id:"group2", text:"group2"},true);
// method 2: as seen on the select2 website
var groupList = $('#groupList').select2();
$(groupList).val("group2").trigger("change");
My problem is that I'm unable to change the selection for a select2 input that loads data using ajax. Any idea what i'm doing wrong?
looks like this can be done using the following code. you need to add the option to the select list and then set the value.
var option=$("<option>").attr("value","group2").html("group2");
$("#groupList").append(option);
$("#groupList").val("group2").trigger("change");

Dropdown based on another dropdown in jsp Struts

I'm very new to Ajax. Currently I'm working on a new project. For that project one of the requirements is, populating a second dropdown based on the input from the first dropdown. I'm using Struts to do that. I don't want the page to be refreshed, so I need to use Ajax for calling the second dropdown content in the backend and populate in the second dropdown. I don't know how to write code for that.
What should be included (jars,tags) in my struts project?
What entries should come in my JSP (I am using <html:select>)?
What will come in JavaScript?
What will come in action class (in action class I can fetch the list values from the DB based on the selection from the first dropdown)?
Instead of ajax, I used struts only to acheive this. I have assigned all variables to form to keep values when submitting form.
The answer to this question would probably a thesis ;)
I will just guide you in here.
1]Use a javascript framework like jquery. It will help you make ajax calls to your controller URL
Check an easy tutorial on http://www.tutorialspoint.com/jquery/jquery-ajax.htm
2] For the controllers lets have two urls mapped:
urapp/poplateDropdown1 to controller which return values/list target at ur first drop down
urapp/poplateDropdown2 to a another controller(or method within same controller) which responds to a GET request and receives a parameter say name SEL_VALUE for the selected value.
3] onchange events.
Have an onchange or similar best suited even on your first dropdoww.
In your event call a js function; like <select onchange=callDropDown2Controller(this.value) >
in your callDropDown2Controller() method:
//pseudo implementation
callDropDown2Controller(var selectedValue){
// now generate an AJAX get request using jquery with the following url
urlToCall = '/urapp/poplateDropdown2?SEL_VALUE=' + selectedValue
}
The rest buddy u need to do some homework and research.

Changing the source of struts select tag dynamically using javascript/Jquery

In my code I have a Struts2 select tag(<s:select>). It reads something like this :
<s:select id="s" list="list" listKey="id" listValue="displayValue">
On some selection made by the user, I want to change the value of list attibute to point to some other list.(possibly using javascript/jquery)
What have you tried ? *
You have at least two ways to do this:
1) Perform an AJAX operation to get the new data (in JSON for example, like a List of 'id' and 'description');
then alter the HTML with Javascript, removing the old Options from the Select,
building and adding the new Options to the Select,
and eventually changing some Select attributes;
2) Perform an AJAX operation to get a completely new Select, elaborated server side, returned as a HTML snippet (a JSP with only one <s:select> inside);
then replace it to the original one on the page, for example using its container (like a div) as target of the AJAX operation.
* #AshishGupta suggested me to remove the "What have you tried ?" part to keep the tone positive. Please read the article, it is a must to understand why this should be always the first (positive and legit) question to askers who doesn't post code (for their own good in first place).
Hope that helps, as the rest of my answer.

Categories

Resources