I need to pass the dropdown selected value to the jQuery plugin.
HTML:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.requiredplugin.js"></script>
</head>
<body>
<select name="Type" id="sid">
<option value="value1">value1</option>
<option value="value2" selected>value2</option>
<option value="value3">value3</option>
</select>
<textarea name="source" id="src1" cols="150" rows="20"></textarea>
<script type="text/javascript">
$("#src1").keyup(function(e) {
$(this).pluginmethod(e.keycode);
});
</script>
</body>
</html>
jquery.requiredplugin.js:
(function ($) {
// jQuery plugin definition
$.fn.pluginmethod = function (keycode) {
return this.each(function () {
var $str = $('#src1');
var $soml = $('#sid');
var somlan = $soml.val(); //if I assign var somlan with some static value my code works
var som = $str.val();
/* My code goes here where I use both var som and var somlan*/
});
};
})(jQuery);
I am able to get the value of $('#src1') and if assign var somlan with some static value then my code works. But if I want to use dropdown selected value(whose id is "sid" ) and retrieve the value in the plugin as var $soml = $('#sid'); then my code doesn't work.
How can I use dropdown selected value in my plugin?
Try this : modify your plugin method with two argument instead of one and pass value of select box as second argument.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.requiredplugin.js"></script>
</head>
<body>
<select name="Type" id="sid">
<option value="value1">value1</option>
<option value="value2" selected>value2</option>
<option value="value3">value3</option>
</select>
<textarea name="source" id="src1" cols="150" rows="20"></textarea>
<script type="text/javascript">
$("#src1").keyup(function(e) {
$(this).pluginmethod(e.keycode,$('#sid').val());
});
</script>
</body>
</html>
Plugin
(function($) {
// jQuery plugin definition
$.fn.pluginmethod = function(keycode, selectVal) {
return this.each(function() {
var $str = $('#src1');
//var $soml = $('#sid');
var somlan= selectVal;
var som= $str.val();
/* My code goes here where I use both var som and var somlan*/
});
};
})(jQuery);
try it like this in your jquery.requiredplugin.js
(function($) {
$.fn.pluginmethod = function(keycode) {
return this.each(function() {
var $str = $('#src1');
var $soml = $('#sid option:selected').text();
var somlan= $soml.val();
var som= $str.val();
/* Your code goes here where you use both var som and var somlan*/
});
};
})(jQuery);
Hope this helps.
You should try :
$("#sid option:selected").text();
or
$("#sid option").is("selected").text()
It looks like sormeone already asked a similar question at jQuery Get Selected Option From Dropdown
This will return an object if i'm right
var sid = $('#sid').find(":selected");
Related
I can't undertand what are I am missing to fire my "change" event in a combobox.
I tried some different options I found in some post, but noone works, so, I think I'm missing something
My html:
<!DOCTYPE html>
<html class="no-js" lang="es">
<script src="../Scripts/jquery-1.10.2.js"></script>
<script src="../Scripts/jquery-ui-1.10.js"></script>
<script src="../Scripts/jquery.validate.js"></script>
<script src="../Scripts/jquery.easyui.min.js"></script>
<body>
<select class="myCombobox" id="myId">
<option value="A">Opt A</option>
<option value="B">Opt B</option>
</select>
<script>
myJs.init();
</script>
</body>
</html>
My js:
var myJS = (function() {
var module = {};
module.initCombo = function(){
$('.myCombobox').combobox( {
change: function( event, ui ) {
console.log(ui);
var selected_value = ui.item.value;
alert("You selected : "+selected_value);
}
});
};
module.init = function() {
module.initCombo();
};
return {
init: module.init
};
})();
Why is the cange event not launched?
i am using two dropdown list in a html file, i am using JQuery for validation.
first i need to store the selected items from both the dropdown list data to a and later i need to compare with next selection.
if both the data matches, need to generate an alert message.
<script src="jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
$("#but").click(function(){
var u=$("#hosp option:selected").val();
var v=$("#city option:selected").val();
alert(u);
alert(v);
var res =u.concat(v);
var flag=true;
});
alert(flag);
});
</script>
<div id="inner">
</div>
<select id="hosp">
<option value="nims">NIMS</option>
<option value="care">CARE</option>
<option value="app">APP</option>
<option value="osm">OSM</option>
</select><br>
<select id="city">
<option value="hyd">Hyd</option>
<option value="sec">Sec</option>
<option value="viz">Viz</option>
<option value="vij">Vij</option>
</select><br>
<input type="button" id="but" class="btn" value="CLCIK"/>
I don't really get what you want to compare, but to append the selection to a div you can use this
$(document).ready(function () {
$("#but").click(function () {
var u = $("#hosp option:selected").val();
var v = $("#city option:selected").val();
alert(u);
alert(v);
var res = u.concat(v);
var flag = true;
// Caching DOM object for better performance
$inner = $('#inner');
// Clearing the content
$inner.html('');
// Adding u to the Content of $inner
$inner.append(u);
// Adding v to the Content of $inner
$inner.append(v);
});
alert(flag);
});
JSFIDDLE
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!
Can any one give me a sample code that gets the selected value from an existing combo box?
I have this code but its not doing anything:
function check ()
{
var e = document.getElementById("ticket_category_clone");
var str = e.options[e.selectedIndex].text;
alert(str);
if (str==="Hardware")
{
SPICEWORKS.utils.addStyle('#ticket_c_hardware_clone{display: none !important;}');
}
}
SPICEWORKS.app.helpdesk.ready(check);
heres a img of the code
and the code
<select id="ticket_category_clone" name="ticket[category]" hdpp="ticket_category">
<option value=""></option><option value="Hardware">Hardware</option>
<option value="Software">Software</option>
<option value="Rede" selected="selected">Rede</option>
<option value="Pedidos">Pedidos</option>
<option value="Formação/Dúvida">Formação/Dúvida</option>
<option value="Outro">Outro</option><option value="#edit_categories#">Edit Categories...</option></select>
what i want its find a way to get the selected value fo that combobox
There is an unnecessary hashtag; change the code to this:
var e = document.getElementById("ticket_category_clone").value;
I use this
var e = document.getElementById('ticket_category_clone').value;
Notice that you don't need the '#' character in javascript.
function check () {
var str = document.getElementById('ticket_category_clone').value;
if (str==="Hardware")
{
SPICEWORKS.utils.addStyle('#ticket_c_hardware_clone{display: none !important;}');
}
}
SPICEWORKS.app.helpdesk.ready(check);
It probably is the # sign like tho others have mentioned because this appears to work just fine.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<select id="#ticket_category_clone">
<option value="hw">Hardware</option>
<option>fsdf</option>
<option>sfsd</option>
<option>sdfs</option>
</select>
<script type="text/javascript">
(function check() {
var e = document.getElementById("#ticket_category_clone");
var str = e.options[e.selectedIndex].text;
alert(str);
if (str === "Hardware") {
alert('Hi');
}
})();
</script>
</body>
I have select box with default value,i want to retrieve default value and changed value using javascript,Below is my Html Select box:
<SELECT ID="TEST" NAME="TEST" ONCHANGE="TEST()">
<OPTION ID="1" VALUE="TEST1" SELECTED/>
<OPTION ID="2" VALUE="TEST2"/>
</SELECT>
Regards,
Raj
You can set custom attribute of the element in the onload event of the document:
window.onload = function() {
var oDDL = document.getElementById("TEST");
oDDL.setAttribute("default_value", oDDL.value);
};
Then to read it:
function Test() {
var oDDL = document.getElementById("TEST");
var strCurrentValue = oDDL.value;
var strDefaultValue = oDDL.getAttribute("default_value");
alert("Default value is: " + strDefaultValue + "\n Current value is: " + strCurrentValue);
}
Complete code and test case: http://jsfiddle.net/yahavbr/MbnH7/
Edit: to support more than one drop down, first pass reference in the onchange event like this:
<select id="TEST" name="TEST" onchange="Test(this);">
Then set the custom attribute in a loop:
window.onload = function() {
var arrDDLs = document.getElementsByTagName("select");
for (var i = 0; i < arrDDLs.length; i++) {
var oDDL = arrDDLs[i];
oDDL.setAttribute("default_value", oDDL.value);
}
};
And the test function also need minor change as it's not getting the drop down as argument:
function Test(oDDL) {
var strCurrentValue = oDDL.value;
var strDefaultValue = oDDL.getAttribute("default_value");
alert("Default value is: " + strDefaultValue + "\n Current value is: " + strCurrentValue);
}
Updated test case: http://jsfiddle.net/yahavbr/MbnH7/1/
Edit II: to show the previously selected value some name changes are required, plus storing the value every time it's changing. The onload becomes this:
window.onload = function() {
var arrDDLs = document.getElementsByTagName("select");
for (var i = 0; i < arrDDLs.length; i++) {
var oDDL = arrDDLs[i];
oDDL.setAttribute("previous_value", oDDL.value);
}
};
(Only change is the custom attribute name)
And the function becomes:
function Test(oDDL) {
var strCurrentValue = oDDL.value;
var strPreviousValue = oDDL.getAttribute("previous_value");
alert("Previous value is: " + strPreviousValue + "\n Current value is: " + strCurrentValue);
oDDL.setAttribute("previous_value", strCurrentValue);
}
(Name change plus setting the custom attribute)
Updated and hopefully final test case: http://jsfiddle.net/yahavbr/MbnH7/4/
why not have the onfocus event (vs. onload) store the current value. one solution might be to do something like this:
$(t).data("prev",$(t).val())
and then have the onchange use that:
var oldVal = $(t).data("prev");
thus when someone clicks on, or tabs into, the ui element it stores the current state, and then can use that if there is a resulting change. also it would need to change the value if the change was accepted so that if focus was not changed (ie: they stayed in the pulldown and changed the value again) and they changed their mind and chose another option that the state was preserved.
many of the examples that i have seen of this store state in a that seemed to be vulnerable to change/events elsewhere.
HTML:
<SELECT ID="TEST" NAME="TEST" ONCHANGE="TEST(this)">
<OPTION ID="1" VALUE="TEST1" SELECTED>TEST 1</OPTION>
<OPTION ID="2" VALUE="TEST2">TEST 2</OPTION>
</SELECT>
javascript:
// store currently selected value
var previousValue = document.getElementById('TEST').value;
function TEST(e) {
alert('old value = ' + previousValue);
alert('new value = ' + e.value);
// store new value
previousValue = e.value;
}
example here
EDIT - I answered wrong before - Here's a sample HTML page that does it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>untitled</title>
<script type="text/javascript" language="javascript">
function showOptionValue(oSelect) {
var def;
for (var i=0; i<oSelect.options.length; ++i) //loop through select options
if (oSelect.options[i].defaultSelected){ //this option's defaultSelected property is set to true (from HTML: selected="selected")
def = oSelect[i].text; //or .value
}
var sel;
sel = oSelect[oSelect.selectedIndex].text;
alert (sel + ' : ' + def);
}
function resetSelect(oSelect) {
for (var i=0; i<oSelect.options.length; ++i) //loop through select options
if (oSelect.options[i].defaultSelected) //this option's defaultSelected property is set to true (from HTML: selected="selected")
oSelect.options[i].selected = true; //so, set its selected property to true, selecting it
showOptionValue(oSelect); //reset status
}
</script>
</head>
<body>
<form>
<!-- call handler function, pass Select object (represents drop-down list) -->
<SELECT NAME="cbo" onchange="showOptionValue(this)">
<OPTION VALUE="not_default">Not DEFAULT VALUE</OPTION>
<OPTION VALUE="1">Small</OPTION>
<!-- default value, preselected -->
<OPTION VALUE="2" selected="selected">Medium</OPTION>
<OPTION VALUE="3">Large</OPTION>
</SELECT>
<!-- call handler function, pass Select object using its name as a variable -->
<input type="button" value="Reset Drop-down" onclick="resetSelect(cbo)">
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Hello world</title>
<script type="text/javascript">
function fn(){
var select = document.getElementById("selectbox");
alert(select.options[select.selectedIndex].value)
}
</script>
</head>
<body>
<header style="margin-left: 50%;">Welcome</header>
<select id="selectbox">
<option value="number 01">Number 01</option>
<option value="number 01">Number 02</option>
<option value="number 01">Number 03</option>
<option value="number 01">Number 04</option>
</select>
<button style="margin-top:10px; margin-left:15px;" onclick="fn()">Click me</button>
</body>
</html>