Develop Reference

display data related to a dropdown option

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)
});

set dropdown selected text from comma seperated values

I am tring to set selected values in a dropdown from a comma seperated string,here i want to set text1,text2,text3,text4 as selected in the dropdown.
Thanks..
var string='text1,text2,text3,text4';
<select id="dropdown">
<option value="0">text1</option>
<option value="1">text2</option>
<option value="2">text3</option>
<option value="3">text4</option>
<option value="4">text5</option>
<option value="5">text6</option>
<option value="6">text7</option>
</select>

Here we go, you can make selected values like following:
var string='text1,text2,text3,text4';
var opts = string.split(",");
function selectOptions() {
var obj = $('#dropdown');
for (var i in opts) {
obj.find('option[value=' + i + ']').prop('selected', true);
}
}
selectOptions();
Fiddle Demo
Hope this will work!

I think you can use string.split(',')

jquery get select option value and then add parameter

I'm trying to add on to the value "&fullpage=true"
<select name="navMenu" onchange="go(this.options[this.selectedIndex].value)">
<option value="-">Select</option>
<option value="page.html&nyo=0" class="ccbnLnk">All</option>
<option value="page.html&nyo=0" class="ccbnLnk">IR</option>
<option value="page.html&nyo=0" class="ccbnLnk">Product</option>
</select>
I'm guessing it would be something like this?
$('select option').attr(val + "&fullpage=true");

You were close, but you needed to iterate over all the option elements and then make the change like:
$('select option').each(function () {
$(this).val($(this).val() + "&fullpage=true");
});
jsFiddle example

You can loop through each of the element using the each function
$('select option').each(function(){
$(this).attr('value', $(this).attr('value') + "&fullpage=true");
});

jQuery get the selected dropdown value on change

I'm trying to get the value of a dropdown on change (and then change the values in a second dropdown).
EDIT: Thanks for all the replies, i've updated to add the () but the code is returning nothing, not null or undefined just a blank alert window
However when I alert it out the attr(value) is undefined.
Any ideas on what i'm missing?
Here is my code:
<script type="text/javascript">
$(document).ready(function() {
var roomID = "0"
$('.dropone').load('ajaxdropdown.aspx');
$('.droptwo').load('ajaxdropdown.aspx?drpType=room&roomid=' + roomID);
$('.dropone').change(function() {
var ts = new Date().getTime();
alert($(this).val)
$(".droptwo").empty();
$(".droptwo").load("ajaxdropdown.aspx?drpType=room&roomid=" + $(this).attr("value") + "&ts=" + ts);
});
});
</script>

val is a method, not a property.
use it like val()
If you are using it many places, i would assign it to a local variable and use it thereafter.
Also you can use the $.now() function to get the unique time stamp. It is equal to DategetTime();
$('.dropone').change(function() {
var item=$(this);
    alert(item.val())
$(".droptwo").empty();
    $(".droptwo").load("ajaxdropdown.aspx?drpType=room
&roomid=" +item.attr("value") + "&ts=" + $.now());
});

$('.dropone').change(function() {
var val = $(this).val();
// OR
var val = this.value;
})

You must obtain the value using a method, not a property. Use this:
alert($(this).val())

Add round brackets to your val: alert($(this).val())

You can also obtain custom attributes from the dropdown as below;
$('.someclass').change (function () {
var val = this.value;
alert(val); //selected value
var element = $(this).find('option:selected'); // assign selected element
var myTag = element.attr("aTag"); // get attribute by name
alert(myTag);
});
<option name='somename' id='someid' aTag='123' value='XYZ'>XYZ</option>

Check jQuery and Javascript methods here to get Single/ Multiple selected values in the Drop Down
Demo Link
jQuery Method:
Method to get Selected Value from a select box:
HTML
<select id="singleSelectValueDDjQuery" class="form-control">
<option value="0">Select Value 0</option>
<option value="8">Option value 8</option>
<option value="5">Option value 5</option>
<option value="4">Option value 4</option>
</select>
<input type="text" id="textFieldValueJQ" class="form-control"
placeholder="get value on option select">
jQuery
$("#singleSelectValueDDjQuery").on("change",function(){
//Getting Value
var selValue = $("#singleSelectValueDDjQuery").val();
//Setting Value
$("#textFieldValueJQ").val(selValue);
});
Method to get Selected Value Option Text from a select box:
HTML
Select Value 0
Option value 8
Option value 5
Option value 4
<input type="text" id="textFieldTextJQ" class="form-control"
placeholder="get value on option select">
jQuery
$("#singleSelectTextDDjQuery").on("change",function(){
//Getting Value
var selValue = $("#singleSelectTextDDjQuery :selected").text();
//Setting Value
$("#textFieldTextJQ").val(selValue);
});

jQuery select option elements by value

I have a select element wrapped by a span element. I am not allowed to use the select id but I am allowed to use the span id.
I am trying to write a javascript/jquery function in which the input is a number i, which is one of the values of the select's options. The function will turn the relevant option to selected.
<span id="span_id">
<select id="h273yrjdfhgsfyiruwyiywer" multiple="multiple">
<option value="1">cleaning</option>
<option value="2">food-2</option>
<option value="3">toilet</option>
<option value="4">baby</option>
<option value="6">knick-knacks</option>
<option value="9">junk-2</option>
<option value="10">cosmetics</option>
</select>
</span>
I wrote something as follows (this does not completely work, which is why I am posting this question):
function select_option(i) {
options = $('#span_id').children('select').children('option');
//alert(options.length); //7
//alert(options[0]); //[object HTMLOptionElement]
//alert(options[0].val()); //not a jquery element
//alert(options[0].value); //1
//the following does not seem to work since the elements of options are DOM ones not jquery's
option = options.find("[value='" + i + "']");
//alert(option.attr("value")); //undefined
option.attr('selected', 'selected');
}
Thanks!

Here's the simplest solution with a clear selector:
function select_option(i) {
return $('span#span_id select option[value="' + i + '"]').html();
}

With jQuery > 1.6.1 should be better to use this syntax:
$('#span_id select option[value="' + some_value + '"]').prop('selected', true);

Just wrap your option in $(option) to make it act the way you want it to. You can also make the code shorter by doing
$('#span_id > select > option[value="input your i here"]').attr("selected", "selected")

options = $("#span_id>select>option[value='"+i+"']");
option = options.text();
alert(option);
here is the fiddle http://jsfiddle.net/hRFYF/

You can use .val() to select the value, like the following:
function select_option(i) {
$("#span_id select").val(i);
}
Here is a jsfiddle: https://jsfiddle.net/tweissin/uscq42xh/8/

To get the value just use this:
<select id ="ari_select" onchange = "getvalue()">
<option value = "1"></option>
<option value = "2"></option>
<option value = "3"></option>
<option value = "4"></option>
</select>
<script>
function getvalue()
{
alert($("#ari_select option:selected").val());
}
</script>
this will fetch the values

function select_option(index)
{
var optwewant;
for (opts in $('#span_id').children('select'))
{
if (opts.value() = index)
{
optwewant = opts;
break;
}
}
alert (optwewant);
}

You can change with simple javascript
document.querySelector('#h273yrjdfhgsfyiruwyiywer').value='4'
<span id="span_id">
<select id="h273yrjdfhgsfyiruwyiywer" multiple="multiple">
<option value="1">cleaning</option>
<option value="2">food-2</option>
<option value="3">toilet</option>
<option value="4">baby</option>
<option value="6">knick-knacks</option>
<option value="9">junk-2</option>
<option value="10">cosmetics</option>
</select>
</span>

$("#h273yrjdfhgsfyiruwyiywer").children('[value="' + i + '"]').prop("selected", true);