If I have a form like this.
<form name="myform" action="" method="POST">
<select name="mydropdown">
<option value="A">AAA</option>
<option value="B">BBB</option>
<option value="C">CCC</option>
</select>
</form>
For radio buttons I would do
var type = $(this).find('input:radio[name="ctype"]:checked').val() || '';
but this can't I get to work on combo boxes.
How can I get the value of the selected option in a combo box?
Update
It is called on a webpage with many forms, so I need the selected value from this particular combo box.
Here is how I get the values from text boxes and radio buttons.
$('form').live('submit', function(){
var title = this.elements.title.value;
var type = $(this).find('input:radio[name="ctype"]:checked').val() || '';
var sect = ?
...
Simply :
$('select[name="mydropdown"]').val();
UPDATE:
And when inside one of the forms :
$('form').live('submit', function(){
var value_of_dropdown = $(this).find('select[name="mydropdown"]').val();
...
For select boxes its enough to use val() to get the selected value.
$('select[name="mydropdown"]').val();
EDIT: I edited the response because I could have sworn there was an id named mydropdown :)
$('select[name="mydropdown"] option:selected').val()
UPDATE:
$('form').live('submit', function(){
var value_of_dropdown = $(this).find('select[name="mydropdown"] option:selected').val();
...
});
Using jQuery, just go for it like:
$('select').val();
$('select[name="mydropdown"]').change(function() {
$('select[name="mydropdown"]').val();
});
Get value selected with javascript:
var countsw=document.getElementById("controlid").options[document.getElement.getElementById("controlid").selectedIndex].value;
With this code you can get value selected combobox even if client-side control has this attribute runat="server" that use in server-side.
Related
I have dynamically created option where all values in option are coming from share point list .
Now I want to get the text of selected option . I tried few ways but I was not able to get
Code for getting data from list
$("#ddlIncrementType").append(
$("<option></option>")
.data("incrementLevel", results[increment].IncrementLevel)
.val(results[increment].Title)
.html(results[increment].Title)
);
Code where my option append
<div class="Increment">
<label for="sel1">Increment Type:</label>
<select disabled class="form-control" id="ddlIncrementType">
<option></option>
</select>
</div>
I want to get the text of Selected Option
Suppose in list there are three options
Item One
Item Two
Item Three
I want exactly text
Anyone who can help ?
I tried it but does't not worked !
var value = $("#ddlIncrementType").find(":selected").val();
var selectedText = $("#mySelect option:selected").html();
var value = $("#ddlIncrementType").find(":selected").text();
You can try this:
$("#ddlIncrementType option:selected").text();
You could use-
$(document).on('change', "#ddlIncrementType", function(){
var value = $(this).text();
alert(value);
});
Also you should not be using disabled for your <select>
I am trying to trim some data from a select drop-down in a form just before it is submitted. The problem is the value is turning to null instead.
<form>
<select name = "test" id = "dropdown">
<option value = "userId_1">User 1</option>
</select>
</form>
Submit
scheduleForm.submit(function (e) {
var user = $('#dropdown').val();
user = user .replace(/userId_/g, '');
$('#dropdown').val(user);
$.ajax(..........
I am guessing I cannot alter the value like this?
you may try this:
scheduleForm.submit(function (e) {
var value= $('#dropdown').val();
$('#dropdown').val(parseInt(value.replace(/\D/g,'')));
user = $('#dropdown').val();
$('#dropdown').val(user);
$.ajax(..........
In dropdown you can select only those options which exists in the option lists: Suppose you have a drop down with option values 2,3,4,5 then you can not set the value of the dropdown to 10. You must have 10 in the option list. Why don't you do the following:-
scheduleForm.submit(function (e) {
var user = $('#dropdown').val();
user = user .replace(/userId_/g, '');
Now use the variable "user" in your ajax instead of the $('#dropdown').val(). I think this may help you.
I want to retrieve the id of my option that I selected. Over here you can see my HTML.
<select name="zaal" id="zaal">
<DIV CONTENTEDITABLE="FALSE" ID="MACONTAINER" MACONSTRAINT="" MAPARAMETER="ZALEN">
<DIV CONTENTEDITABLE="TRUE" ID="MAITEM">
<option value="~#ITEM.ID~" id="ZAALNAME">~ITEM.ID~, ~ITEM.NAME~</option>
</DIV>
</DIV>
</select>
I am doing it like this.
var selectVal = $("#zaal :selected").val();
var id = selectVal.substring(1);
console.log("id is: " + selectVal);
But for some reason it won't work.
Can anybody help?
EDIT
Ok the divs are the problem. But I need those to get my values from my database.So I think I need to find another solution than a select.
$("#zaal option:selected").attr('value'); // will return you ~#ITEM.ID~
To get the id
$("#zaal option:selected").attr('id'); // will return you ZAALNAME
To get id on selection change try this:
$('#zaal').on('change', function() {
// To get id
$('option:selected', this).attr('id');
$('option:selected', this).attr('value'); // return the value of selected option
// To get the select box value
var value = this.value;
});
Maybe try:
$("#zaal option:selected").val();
Also, try moving the divs outside of the select element.
Look at this question:
<div> and <select> tags
You can only put <option> or <optgroup> inside a <select>. If you want to put anything else in there you have to make some kind of list yourself.
Why would you like to put any div inside a select anyway?
If I put the HTML you gave me (with edited strings) inside Google Chome, this is what is made of your code:
<select name="zaal" id="zaal">
<option value="x" id="ZAALNAME">X, Y</option>
</select>
$("#zaal option[value='0']").text()
Try this:
var selectVal = $("#zaal option:selected").val();
var id = selectVal.substring(1);
console.log("id is: " + selectVal);
The html should be
<select name="zaal" id="zaal">
<option value="~#ITEM.ID~" id="ZAALNAME">~ITEM.ID~, ~ITEM.NAME~</option>
</select>
$('#zaal').change(function(){
alert($($(this)+':selected').attr('id'));
});
Fiddle http://jsfiddle.net/cBaZ7/1/
val() will retrieve the value of the selected option. It is not the id
So try this:
$("#zaal option:selected").attr("id")
I'm having trouble trying to accomplishing this.. Whatever option I select from a dropdown list named programs_dropdown I want to add to a text field named programs_input and separate the options values by a comma.
e.g. php, jquery, html
Below the dropdown list I have an add div. On click, it should add what I selected from the dropdown to the text field.
$(document).ready(function(){
$('#add').click(function() {
var programs = $("#programs_dropdown").val(); //get value of selected option
$('#programs_input').val(programs.join(',')); //add to text input
});
});
HTML
<select name="programs_dropdown" id="programs_dropdown">
<option value="php">php</option>
<option value="jquery">jquery</option>
<option value="html" selected="selected">HTML</option>
</select>
<div id=add">Add</div>
<input type="text" name="programs_input" id="programs_input" />
I'm getting skill.join is not a function
The select has to multi option if you want to select multiple. Change it to
<select name="programs_dropdown" id="programs_dropdown" multiple>
Then it would start working.
Demo
EDIT:
$(document).ready(function(){
$('#add').click(function() {
var program = $("#programs_dropdown").val(); //get value of selected option
var programs = $('#programs_input').val().split(",");
if (programs[0] == "") {
programs.pop()
}
if ($.inArray(program, programs) == -1) {
programs.push(program);
}
$('#programs_input').val(programs.join(',')); //add to text input
});
});
DEMO
I think this is what you require Demo
I'm somewhat new to jQuery. I'm pretty sure this is possible, but I'm not quote certain how to code this.
What I'm looking to do is to use a dropdown with selections that represent ranges (e.g. if someone were searching for bedrooms, the dropdown selctions would look like "0-2", "3-5", "6+"). Then when someone chooses a selection, two hidden fields would by dynamically filled. One field with the minimum of the range, and the other field with the maximum of the range.
Here is an example of how I'm trying to structure this:
<select id="bedrooms" class="dropdown">
<option>Bedrooms</option>
<option></option>
<option value="1">0-2</option>
<option value="2">3-5</option>
<option value="3">6+</option>
</select>
<input type="hidden" name="bedrooms-from" value=''>
<input type="hidden" name="bedrooms-to" value=''>
I suppose the values of each option could change, I wasn't sure what the best way to approach that would be.
I haven't actually run this, but I think it should work:
$("#bedrooms").change(function ()
{
// Get a local reference to the JQuery-wrapped select and hidden field elements:
var sel = $(this);
var minValInput = $("input[name='bedrooms-from']");
var maxValInput = $("input[name='bedrooms-to']");
// Blank the values of the two hidden fields if appropriate:
if (sel.val() == "") {
minValInput.val("");
maxValInput.val("");
return;
}
// Get the selected option:
var opt = sel.children("[value='" + sel.val() + "']:first");
// Get the text of the selected option and split it on anything other than 0-9:
var values = opt.attr("text").split(/[^0-9]+/);
// Set the values to bedroom-from and bedroom-to:
minValInput.val(values[0]);
maxValInput.val((values[1] != "") ? values[1] : 99999999);
});
$("select").on("change", function() {
$("form").append( /* <input type='hidden'> tag here */ );
});