i have little problem with ddslike jquery lib
I have two select box like this:
<select id="from">
<option value="1" data-imagesrc="img.png" data-description="USD">Dollar</option>
<option value="2" data-imagesrc="img.png" data-description="EUR">Euro</option>
</select>
<select id="to">
<option value="1" data-imagesrc="img.png" data-description="USD">Dollar</option>
<option value="2" data-imagesrc="img.png" data-description="EUR">Euro</option>
</select>
Javascript of SELECT BOX (Want just the design from ddslike):
<script type="text/javascript">
$(document).ready(function () {
$('#from_fees').ddslick({
width: 100,
});
$('#to_fees').ddslick({
width: 100,
});
});
</script>
Here my script that i wanted to fetch value of select's options:
$(function(){
$("#from").change(function(event){
//alert("Click event on Select has occurred!");
$("option:selected", $(this)).each(function(){
var obj = document.getElementById('from').value;
alert("selected value"+obj);
});
});
});
But i get no results !
I want get the two value from the two select in the same time.
Thank you.
First, you've got to be consistent with your IDs. You've got id="from" in the html, but you call .ddslick() on the element with id "from_fees".
If I understand, you'd like to get the values of each whenever either one changes. How about:
<script>
$('select').change(function(){
var to = $('#to').val();
var from = $('#from').val();
// alert("To: " + to + " and from: " + from + ".");
});
</script>
You don't need to use "this", because you want the value out of both of them.
Related
I have an array of select boxes, with a unique id like this.
<select class="taskcompleted" id="c392018">
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
I have a JSON in the format
{"id":"c392018","value":"Yes"}
I am using the following Javascript to set the selected value
$.getJSON('getstatus.php') //place correct script URL
.done(function(response) {
$.each(response, function(key) {
var SelectObj = response[key];
console.log(SelectObj['value']);
jQuery('#' + SelectObj['id']).val(SelectObj['value']).attr('selected', true);
});
});
This is not selecting the value of "Yes". How can I do this?
You simply need to use .val() to set the selected option using the value from your object:
So where you have:
jQuery('#' + SelectObj['id']).val(SelectObj['value']).attr('selected', true);
Should be:
jQuery('#' + SelectObj['id']).val(SelectObj['value']);
See the snippet example below:
Also if you really want the selected property on the item, you should use:
.prop("selected", "selected");
var SelectObj = {"id":"c392018","value":"Yes"};
jQuery('#' + SelectObj['id']).val(SelectObj['value']).prop('selected','selected');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="taskcompleted" id="c392018">
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
Well, you don't really need jQuery here.
var select = document.getElementById(SelectObj.id);
select.value = SelectObj.value;
I have a drop down list
<select name="column_select" id="column_select">
<option value="col1">1 column</option>
<option value="col2">2 column</option>
<option value="col3">3 column</option>
</select>
On clicking an option i want to display the details of the particular option in the same page.
How can this be implemented using jquery?
function showval(value)
{
var text = $("#column_select option:selected").text();
var string = "Value is: "+value+" and Text is: "+text;
$("#showvalue").html(string);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="showvalue">
</div>
<select name="column_select" id="column_select" onchange="showval(this.value);">
<option value="col1">1 column</option>
<option value="col2">2 column</option>
<option value="col3">3 column</option>
</select>
It should help you.
use this jquery
jquery
$('select.column_select').on('change', function(){
var selectVal = $(this).val();
if(selectVal==col1){
// do something
};
if(selectVal==col2){
// do something
};
if(selectVal==col3){
// do something
};
});
You can subscribe to the change event for the select and perform the details display based on the current value in the select:
$("#column_select").on("change", function () {
var value = $(this).val();
// logic based on selected value
});
try this...
$(document).on('change','#column_select',function() {
// Code to write it anywhere on page.
// If you want it to write on `span#spnDisplay` then use this
var selText = $('#column_select option:selected').text();
$('#spnDisplay').text(selText)
});
I have one input that's value is a SUM of a bunch of select options. From there I am setting up another input that looks at the value from the first input and is suppose to update when the first one changes (plan to do more with it, but can't get past this step). Unfortunately the second is not updating on change.
Sample HTML:
<select name="product-attr-os">
<option data-selected="house" value="10">Made in House</option>
<option data-selected="license" value="
15">Licensed Software</option>
<option data-selected="open" value="20">Open Source</option>
</select>
<br>
<select name="product-attr-network">
<option data-selected="3g" value="40">3G</option>
<option data-selected="4g" value="
45">4G/LTE</option>
<option data-selected="5g" value="50">5G</option>
</select>
<p>Attr Total Cost</p>
<input type="text" class="product-attr-totalCost" name="product-attr-totalCost" readonly />
<p>Standard Cost</p>
<input type="text" class="product-standardCost" name="product-standardCost" readonly />
JQuery:
// SUM (Product Attributes)
var productAttrTotal = function (inputs, output, selected) {
$(document).ready(function () {
$(inputs).bind('change', function () {
var sum = 0;
$(inputs).find(selected).each(function () {
sum += parseInt($(this).val());
});
$(output).val(sum);
});
$(inputs).trigger('change');
});
};
productAttrTotal('select', '.product-attr-totalCost', ':selected');
// Product Attributes Total + Wifi
var productTotalCost = function (attrCost, totalCost) {
$(document).ready(function () {
$(attrCost).bind('change', function () {
$(totalCost).val($(attrCost).val());
});
$(attrCost).trigger('change');
});
};
productTotalCost('.product-attr-totalCost', '.product-standardCost');
Jsfiddle
If you want to display same value in both the input fields, pass the selector for both of them as the output using multiple selector
productAttrTotal('select', '.product-attr-totalCost, .product-standardCost', ':selected');
Demo: Fiddle
Also note to trigger the change event on page load for only one of the select element
$(inputs).first().trigger('change');
In that case
productAttrTotal('select', '.product-attr-totalCost', ':selected');
then once the value of update is changed using script trigger the change event
$(inputs).first().trigger('change');
Demo: Fiddle
Hello everyone how can I get two values from different select boxes? I get first value in my select box but I can't get the second value from another select box.Here is my javascript code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var select = document.forms[0].sel;
var select2=document.forms[0].sel2;
select.onchange = function () {
var value = select.options[select.selectedIndex].value; // to get Value
alert(value);
}
select2.onchange = function () {
var value2 = select2.options[select2.selectedIndex].value; // to get Value
alert(value2);
}
});
</script>
<form>
<SELECT NAME="sel" onChange="split(selected value)">
<OPTION VALUE=1>Milk</option>
<OPTION VALUE=2>tea</option>
<OPTION VALUE=3>water</option>
<OPTION VALUE=4>coffee</option>
</SELECT>
</form>
<form>
<SELECT NAME="sel2" onChange="split(selected value)">
<OPTION VALUE=1>Milk</option>
<OPTION VALUE=2>tea</option>
<OPTION VALUE=3>water</option>
<OPTION VALUE=4>coffee</option>
</SELECT>
</form>
The second select box is in the second form. So:
var select2 = document.forms[1].sel2;
That said, you can actually use jQuery for these things:
// bind a change event handler to the second select
$("select").eq(1).on("change", function() {
alert( $(this).val() );
});
jQuery Tip - Getting Select List Values
var foo = [];
$('#multiple :selected').each(function(i, selected){
foo[i] = $(selected).text();
});
$(document).ready(function () {
$('#sel').change(function(){ $('#sel option:selected').val(); });
give id to your select control
<SELECT id="sel">
with help of jQuery ( i suggest the logic, not the solution )
$(document).on('change', 'select', function(){
var selecetdOption = $(this).val();
alert(selecetdOption );
});
Working Demo
You have wrong into your javascript because you have put
var select2=document.forms[0].sel2;
try to put
var select2=document.forms[1].sel2;
and it works!
How can you get the selected value from drop down list using JavaScript? I have tried the following but it does not work.
var sel = document.getElementById('select1');
var sv = sel.options[sel.selectedIndex].value;
alert(sv);
It is working fine with me.
I have the following HTML:
<div>
<select id="select1">
<option value="1">test1</option>
<option value="2" selected="selected">test2</option>
<option value="3">test3</option>
</select>
<br/>
<button onClick="GetSelectedItem('select1');">Get Selected Item</button>
</div>
And the following JavaScript:
function GetSelectedItem(el)
{
var e = document.getElementById(el);
var strSel = "The Value is: " + e.options[e.selectedIndex].value + " and text is: " + e.options[e.selectedIndex].text;
alert(strSel);
}
See that you are using the right id. In case you are using it with ASP.NET, the id changes when rendered.
Direct value should work just fine:
var sv = sel.value;
alert(sv);
The only reason your code might fail is when there is no item selected, then the selectedIndex returns -1 and the code breaks.
Hope it's working for you
function GetSelectedItem()
{
var index = document.getElementById(select1).selectedIndex;
alert("value =" + document.getElementById(select1).value); // show selected value
alert("text =" + document.getElementById(select1).options[index].text); // show selected text
}
Here is a simple example to get the selected value of dropdown in javascript
First we design the UI for dropdown
<div class="col-xs-12">
<select class="form-control" id="language">
<option>---SELECT---</option>
<option>JAVA</option>
<option>C</option>
<option>C++</option>
<option>PERL</option>
</select>
Next we need to write script to get the selected item
<script type="text/javascript">
$(document).ready(function () {
$('#language').change(function () {
var doc = document.getElementById("language");
alert("You selected " + doc.options[doc.selectedIndex].value);
});
});
Now When change the dropdown the selected item will be alert.
I would say change var sv = sel.options[sel.selectedIndex].value;
to var sv = sel.options[sel.selectedIndex].text;
It worked for me. Directing you to where I found my solution
Getting the selected value dropdown jstl
According to Html5 specs you should use --
element.options[e.selectedIndex].text
e.g. if you have select box like below :
<select id="selectbox1">
<option value="1">First</option>
<option value="2" selected="selected">Second</option>
<option value="3">Third</option>
</select>
<br/>
<button onClick="GetItemValue('selectbox1');">Get Item</button>
you can get value using following script :
<script>
function GetItemValue(q) {
var e = document.getElementById(q);
var selValue = e.options[e.selectedIndex].text ;
alert("Selected Value: "+selValue);
}
</script>
Tried and tested.