I have fields that a user would enter and i would pass it into jQuery and pass to a web service.
I can get textboxes values by:
var name = $("#MainContent_txtName").val()
The problem I'm having is a multi-select that comprises of a list item collection.
If I was to do this server side, I would do something like:
foreach (ListItem li in listTitles)
{
if (li.Selected)
{
selectedValue += li.Value + ",";
}
}
And this would give me the string of selected values from the select list.
I'm having trouble getting it out from jQuery.
If I do
var titles = $("#MainContent_selectListTitles").val()
That is obviously incorrect because it won't bring back the selected list items.
I saw a post that suggested that I could retrieve it if I say option selected.
So I tried this:
var titles= $('#MainContent_selectListTitles option:selected');
The next thing I did was pop an alert to see what the titles were. It just said [object, object].
So my questions are:
Is it possible to get the selected items from the list item collection concatenated into a string?
Or is it better that I get all the form values from a postback even on my code behind and then call the jquery function? If this is an option, i've attempted to do this but have failed. It tells me that it can't find the method. So i'm definitely not calling the jquery function correctly on postback of the button event.
THanks.
I'm not surprised that you've got [object, object] in your alert - that's because you've had and array of selected items (actually, two items were selected) and alert displayed your array as [object, object] which is fine.
Having the following html markup:
<div>
<select multiple="multiple" id="mySelect">
<option value="test1" selected="selected">Test 1</option>
<option value="test2">Test 2</option>
<option value="test3" selected="selected">Test 3</option>
</select>
</div>
And the following script:
<script type="text/javascript">
$.ready = function () {
var selectedItems = $("#mySelect option:selected");
for (var i = 0; i < selectedItems.length; i++) {
alert("The value is: "+selectedItems[i].value + "; the text is: "+selectedItems[i].text);
}
}
</script>
Will probably solve your problem.
Actually, binding the data manually is a huge pain and I do recommend you to look on the modern MVVM libraries like knockout.js.
For instance:
http://knockoutjs.com/examples/controlTypes.html
First, make sure your item id is correct on client side that is "MainContent_selectListTitles". You can check it by "View Source".
If the ID is correct, follow this.
$('#MainContent_selectListTitles').change(function () {
var str = "";
$('#MainContent_selectListTitles option:selected').each(function () {
str += $(this).text() + " ";
//pass str value to your web service here.
});
}).trigger('change');
Every time there is changes, it will call this function which means it will make your web service busy. You can move the above code to button click event if you want.
Related
I am using bootstrap 3 and listgroup.js (https://github.com/rickardn/listgroup.js) to turn a select dropdown visually into a list. However, as soon as I add class="list-group" to the select, my javascript is no longer able to get the selected value.
HTML
<select id="selecteduser" name="selecteduser" class="list-group">
<option value="user1">user1</option>
<option value="user2">user2</option>
<option value="user3">user3</option>
</select>
JS
$("#selecteduser").change(
function() {
//get the selected value
var selectedValue = this.value;
//make the ajax call
alert("You selected " + selectedValue);
}
);
The listgroup.js makes reference to the actual select being hidden, but how can I get the selected value from this hidden select in my Javascript?
According to list-group.js plugin documentation the javascript API not implemented yet:
More to come Because this project just got off the ground not
everything have been documented fully. Examples of functions that
exist but which will be described here incrementally are
The JavaScript API
But here is quick workaround
$(".list-group > a").on('click', function() {
alert("You selected " + $(this).data('value'));
});
https://jsfiddle.net/v8tbsktq/
I need help looping through all my select tags in my html page and running some functions on each change
<div id="product_options">
<label>Color</label>
<select name="productOptions" id="colorOpt" style="margin-bottom:10px;">
<option value="1">White</option>
<option value="3">Blue</option>
</select>
<label>Size</label>
<select name="productOptions" id="sizeOpt" style="margin-bottom:10px;">
<option value="2">9oz</option>
<option value="4">10oz</option>**strong text**
</select>
</div>
Everything inside of the main div is variable including the label, names and id's
what i want to do is everything someone updates either one of the selected options i need to figure out which select element they chose and get the value along. So for example if they update the color option to blue i need to trigger a call in jquery to show that select element with id colorOpt was updated with the value of 3
Any ideas I am completely lost as to how to do this. Started with this but not sure if its correct or not
$('#product_options').select("select").each(function(selected, index) {
});
It looks like you started thinking that you'd need to loop through every select...but since you said that you need to "figure out which select element they chose" you can rely on the this keyword inside of a change callback.
Fiddle: http://jsfiddle.net/vpqh3kjz/
Code:
// Every time someone updates either selected option fire a callback
$('#product_options select').change(function () {
// `this` represents the element that changed
var id = this.id;
var value = this.value;
// Do something with your data here
console.log('select element id ' + id + ' was updated with ' + value);
});
$('select').on('change',function(){
var value = $(this).val();
alert(value);
});
Just for helping if someone like land on this question like me.
I searched for a script which i can use to append something according to selected value.
here is what i come up with. JSFIDDLE
Appending code on select field value change and then what's in the value can be took for a loop to append that amount of tags in specific container.
Note: This might give you an error if you have options value other then numbers.
// Every time someone updates selected option fire a callback
$('#product_options select').change(function () {
var container = $('#container');
container.empty();
for(var i = 0; i< this.value; i++){
container.append('<p> index: '+ i +" <br> value: "+ this.value +'</p>');
}
});
I have multiple dropdown menus that are the same, I need them to be the same.
<select name="Obrojgoluba" id="otacmajka" class="selectbox_dodajpostojeceg" onchange="dodajpostojeceg('otac')">
<option value="1">06557-07-681</option>
<option value="2">07216-05-552</option>
</select>
This is my jQuery function to get value from that select list
function dodajpostojeceg(x)
{
var ID = $('select[name="Obrojgoluba"]').val();
alert(ID);
}
But problem is that it gets value from the first select list, not from others I have on my site. When I click on the first one it gets good values. but when I click on other select list on my site that are the same as first one it returns or empty or value it remembered from the first select list
You are using this
var ID = $('select[name="Obrojgoluba"]').val();
And it is possible as you said that there are multiple select on your page. So if they are having same name, above code would select the first one and that is what you are getting.
So you can just change the function and markup to made this code workable.
function dodajpostojeceg(element)
{
var ID = $(element).val();
alert(ID);
}
and call this function as like this
<select name="Obrojgoluba" id="otacmajka" class="selectbox_dodajpostojeceg" onchange="dodajpostojeceg(this)">
JS Fiddle Demo
A strange thing to be doing, but try this:
function dodajpostojeceg(x)
{
var ID = $(this).val();
alert(ID);
}
As CBRoe comments, multiple identical IDs are invalid, and this may hamper your progress...
Make sure that the jquery lib is included and the function is defined before the html
<head>
function dodajpostojeceg(x)
{
var ID = $('select[name="Obrojgoluba"]').val();
alert(ID);
}
</head>
<body>
<select name="Obrojgoluba" id="otacmajka" class="selectbox_dodajpostojeceg" onchange="dodajpostojeceg('otac')">
<option value="1">06557-07-681</option>
<option value="2">07216-05-552</option>
</select>
</body>
Fiddle: http://jsfiddle.net/kR8yH/
When the html is rendered, it will look for a function named dodajpostojeceg() and if it not defined, it will not be able to bind the select and the function
I am assuming that all the selects are uniquely named
I am filling a drop down based on the value selected in the first drop down.Data being sent back from server is in JSON format and using JQuery to parse and fill the second select tag
<select name="abc" id="jobName">
<option value="-1">Please select a Job</option>
</select>
This is my Jquery code
var selectedGroup = document.getElementById(groupDropDownId);
var groupdata = selectedGroup.options[selectedGroup.selectedIndex].value;
var formInput='group='+groupdata;
$.getJSON('search/getSchedulerJobListForGroup',formInput,function(data) {
$('.result').html('' + data.jobList + '');
$.each(data.jobList,function(index, value){
var jobId = document.getElementById(resetDropDownId);
var option=new Option(value,value);
try{
jobId.add(option);
}
catch(e){
jobId.appendChild(option);
}
});
});
$("#jobName")[0].selectedIndex = 1;
// $("#jobName").val($("#triggerjobName option:first").val());
in above code groupDropDownId is ID of the drop down based on whose value, second drop down will be filled.resetDropDownId is ID of second drop down which i am trying to fill from JSON data getting from the server.
Upon filling the drop down, its also creating an empty option tag and it is getting select by default.
I am not sure if i can add some default value to that empty option so that i can select that default option value like "please select bla bla."
also i tried to select first element from the drop down but nothing seems working for me.I am wondering what i am doing wrong here?
Based on your question, it looks like you want to know how to change the value and text of an element within a dynamically populated select list.
Currently, you have this statement $("#jobName")[0].selectedIndex = 1; sitting outside of your getJSON request. If you move this inside of the getJSON function, it will work as expected.
If you want to set the value and text of that object, you'll want to use ->
$('#jobId option:first').val("Some Value").text("other stuff");
You can see a working JS Fiddle using dynamically populated select list from a JSON object.
Fiddle
I am new to Javascript, JSON and jQuery. So please be easy on me. I have a JSP page that contain a drop down list. The contents of the drop down list are populated when the page is loaded. I wrote a Servlet that return the contain of the drop down list in the form of Map, and convert it to JSON string and sent back to the jsp via response.getWriter().write(json); However I am having trouble to getting the result back from the jsp side, and populate the contain of the drop down list from the result. Here are my codes
customer.jsp
$(document).ready(function() {
getCustomerOption('customer'); //try to pre-populate the customer drop down list
});
function getCustomerOption(ddId) {
var dd = $('#' + ddId);
$.getJSON("http://localhost:8080/WebApps/DDListJASON", function(opts) {
$('>option', dd).remove(); // Remove all the previous option of the drop down
if (opts) {
$.each(opts, function(key, value) {
dd.append($('<option/>').val(key).text(value));
}
}
});
}
down where the drop down list is generated
<select id="customer" name="customer">
<option></option>
</select>
The result is nothing get populated into the list. So sad
I think you are invoking the wrong function in document ready
Shouldn't it be
getInitialOption('customer');
instead of
getCustomerOption('customer');
You may add additional <option> elements to a <select> with the code:
$("#selectID").append("<option>" + text + "</option>");
see: JQuery Docs
I don't understand $(''), but I'm not sure that's the problem either, hard to tell exactly.
I do know it will be quicker if you do create the list of options in-memory and then do one append with .html(options) rather than append them one at a time. That may make it easier to understand also, to build the html up one line at a time and then append it.