I have table in my view in which the first column has the Drop down box for each row. The last column has a button, on click of which I need to get the value from the Drop Down box. I have specified ID to each DropDown box. But I am unable to get the correct selected value. If I use a single Drop Down box, I get desired value
HTML Code:
<td class="col-md-2">
#Html.DropDownListFor(model => model.SelectedBranch, Model.BranchList, new { id = "ddBranch-" + item.ID, style = "display:none;", #Class = "form-control m-right-sm" })
</td>
JS Code:
If I use only one dropdown box, below code works fine:
function update(id) {
var branchid = $("#SelectedBranch").val();
But since I have multiple Dropdown box, I tried using below code:
function update(id) {
var e = document.getElementById("ddBranch-" + id);
var br = e.options[e.selectedIndex].value;
Now the first statement works fine. I get values in var e. I checked and found that the second item has property selected to true. But the second statement gives error. I tried couple of similar approach suggested on SO but nothing seem to be working. I am using asp.net mvc .Please advise.
You are just doing it the hard way, Since you already have dynamic id's to each drop-down you can build the same id by string concatenation. Use this
var branchid = $("#ddBranch-" + id).val();
Related
I was using select Person_name = $('#selectedPerson').val()
person_name.length is showing 2 if selected 2 values.
Now i have changed to check boxes which is in table. If i am using person_name= document.getElementById("selectedPerson").innerText, person_name.length is not working. It is taking length of the content. I want to count of the person and it is value which i am selecting in check-boxes.
Thanks,
Raja.
Side note: an ID should only ever be applied to one element, so you want .selectedPerson not #selectedPerson if it's going to select two things.
var people = $('.selectedPerson');
var count = people.count;
var name = people.text();
I am using select2 and I use it for a single choice. I want to move the result of what we have chosen to another div.
Please check my code:
https://jsfiddle.net/hxe7wr65/
How to move it? because I don't want the result to show in the box. I want the box still clear and even after I choose, the placeholder still shows up.
This is the design that i'm doing right now
in that image. its only can choose 1 option. after we choose. the result show up to another place and so the select still have the placeholder in it. please guys help me.
thank so much
Ok I'm not 100% sure this is what you're looking for, but I think you wan't the grab value of the last selected item, transfer it to another div and then clear the input.
For the first step add an event handler to it.
var $eventSelect = $("#position"); //select your select2 input
$eventSelect.on('select2:select', function(e) {
console.log('select')
console.log(e.params.data.id) //This will give you the id of the selected attribute
console.log(e.params.data.text) //This will give you the text of the selected text
})
Now that you have the value, transferring it to the other div is relatively simple.
var $eventSelect = $("#position"); //select your select2 input
$eventSelect.on('select2:select', function(e) {
var text = e.params.data.text
$("#otherdiv").append(text)
})
Then to clear the form
var $eventSelect = $("#position"); //select your select2 input
$eventSelect.on('select2:select', function(e) {
var text = e.params.data.text
$("#otherdiv").append(text)
$(this).val('');
// or depending no what version you are using
$(this).select2('val', '')
})
Im using select2 by ivaynberg and have an issue with how the data is returned when submitting.
Is there any way to get the results in the form submit data in the order in which they where selected in the select2 element without using the sortable drag and drop solution?
Lets say there are three options:
<option name=red value=red>red</option>
<option name=blue value=blue>blue</option>
<option name=green value=green>green</option>
and in a multiple select2 element, the selection is made as green then red (in the rendered element, green sits in front of red). When submitting the form the array returns:
[select2] => Array
(
[0] => red
[1] => green
)
in the order they appeared in the initial html data.
But I would like to record the order of which the user selected these values by outputting the submit data in the selected order like this:
[select2] => Array
(
[0] => green
[1] => red
)
Any switch or option in select2 I can use to do this? (a bit of a JS novice, so I did not understand all the documentation provided with this awesome function).
I got an excellent code snippet from jdecuyper posted on my original thread on the select2 github issue page:
If you access directly the selected items inside the multiple select
then you can read the elements in the order they got selected:
http://jsfiddle.net/jdecuyper/zx7vZ/
$("#m1").select2();
$("#submit_selection").click(function () {
var selectedItems = "";
var selectedItemIds = "";
var separator = "";
for(var i = 0; i < $("#m1").select2("data").length; i++)
{
selectedItems += separator + $("#m1").select2("data")[i]["text"];
selectedItemIds += separator + $("#m1").select2("data")[i]["id"];
separator = " ";
}
$("#m1selectedItem").val(selectedItems);
$("#m1selectedItemIds").val(selectedItemIds);
});
Add a hidden attribute to the text input that collects the ordered IDs (or values) on submit and it works like a champ.
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 have a table in which a few columns contains select elements. In the tfoot I have one input element for each row used for filtering the row based on the selected value in the select element.
When loading the table and directly filtering the columns with selects, than it works and the table is filtered.
But when making a change in the select elements, the filter function is not taking any notice that the value has changed.
Checking out the html I can see that the "selected" attribute is still on the option that was selected when loading. Hence, it doesn't get updated when making an actual changed (identified in both FF and Chrome).
But from jQuery, searching for the selected value (.find(":selected")) works. So I figure that I can use that to find the value and then set the selected attribute to whatever was selected. This is how I am trying to do it:
$("select[id^='qu_owner']").live('change', function (e) {
var owner = $(this).val();
console.log(owner);
var ticketid = $(this).attr('id').substr(9);
$($(this) + " option[value=" + owner + "]").attr("selected", "selected"); //Update: this has been removed
});
But the selected attribute is still not updated in the element.
Any clue how to do this? I need the filtering to work and it's looking at the selected attibute. Is it not possible to make this kind of update to the select element?
UPDATE
Ok, based on the comments and answers below I understand there are better ways of doing what I did above. So instead of using $(this).find(":selected").val(); I now use $(this).val();. Also, I did remove the last row since I understand one shouldn't try to set the selected attribute.
And also, I now understand that the code where I have the actual problem is the filter function. This is for DataTables so it's a plugin but this is the significant part:
aData[i] is the actual table cell. Hence, it's just text but in this case it's the text for my select element. I think below is heading in the right direction, but still not working (check comments next to console.log-rows):
function( oSettings, aData, iDataIndex ) {
var ret = true;
//Loop through all input fields i tfoot that has class 'sl_filter' attached
$('tfoot .sl_filter').each(function(i, obj){
//$(this) can be used. Get the index of this colum.
var i = $("tfoot input").index($(this));
//Create regexp to math
var r = new RegExp($(this).val(), "i");
//Get the selected option from the column
console.log($(aData[i]).attr('id')); //Properly prints the ID
console.log($(aData[i] + " option:selected").text()); //Prints all options, not only the selected on
console.log($(aData[i] + " option:selected").val()); //Prints the value of the id that was selected when data was loaded, even if a new option has been chosen
console.log($(aData[i]).val()); //Prints the value of the id that was selected when data was loaded, even if a new option has been chosen
var str = $(aData[i] + " option:selected").text();
/*Test to see if there is a match or if the input value is the default
(the initial value of input before it has any fokus/text) */
if(r.test(str) || $(this).val()=="Search"){
//Return true only exits this function
return true;
}else{
/*Return false returns both function an .each. Retain 'false' in a variable scoped
to be reached outside the .each */
ret = false;
return false;
}
});
//Return true or false
return ret;
}
It is the text for the selected element I need to get hold of. That's what should be filtered upon. How can I do that?
Update
To narrow it down, I have created a jsfiddle with what's necessary. It's all about how to extract the text from the selected option: jsfiddle
aData[i] = the table cell. In jsfiddle, i use "sel" as variable for the content of the cell. The text for sel is copied form aData[i].
There's no need to change the attribute of the <option> - that's supposed to contain the original state of the element as it was downloaded from the server.
Your filter should be checking the selected property of the chosen option, e.g.:
.filter(function() {
return this.selected; // check the boolean property
})
This is also how the :selected pseudo-selector works - it checks the current value of the property, not the attribute.
Note that in the change handler for a <select> element, you can just use this.value to get the currently selected value.
$('select').on('change', function() {
// current value
var value = this.value;
// text of the currently selected option.
var text = this.options[this.selectedIndex].text;
}