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?
Related
I'm trying to modify several selectboxes using the following code in a custom.js file. Each ID is in different pages and the code that I'm using in footer.php is the following:
<script>
var selectFunction = function() {
document.getElementById('ofae').options[0].text = 'Artists';
};
var selectFunctionn = function() {
document.getElementById('ofav').options[0].text = 'Artists';
};
</script>
Then:
<?php
// without if statement
echo '<script type="text/javascript"> $(function(){ selectFunction();selectFunctionn(); }); </script>';
?>
The problem is that only one of them get executed, when I'm in page 2 and the first value is NULL it doesn't execute the rest of the code.
A test file test.php with the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test php echo script</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<select id="ofav">
<option value="">o1</option>
<option value="">o2</option>
<option value="">o3</option>
<option value="">o4</option>
<option value="">o5</option>
</select>
<select id="ofae">
<option value="">o1</option>
<option value="">o2</option>
<option value="">o3</option>
<option value="">o4</option>
<option value="">o5</option>
</select>
<script>
var selectFunction = function() {
document.getElementById('ofav').options[0].text = 'Artists';
document.getElementById('ofae').options[0].text = 'Artists';
}
</script>
<?php
// without if statement
echo '<script type="text/javascript"> $(function(){ selectFunction(); }); </script>';
?>
</body>
</html>
works fine!
Check:
if there are no typing errors
if PHP if statement is correct
if there are two <select> blocks
...
modify your function like this and it will work
var selectFunction = function() {
if(document.getElementById('ofae') != null){
document.getElementById('ofae').options[0].text = 'Artists';
}
else if(document.getElementById('ofav') != null){
document.getElementById('ofav').options[0].text = 'Artists';
}
};
I hope this will solve your problem
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");
Issue: I have a dropdown with a list of years in it with nothing selected, the user selects "1976", I run a function. If the user clicks on the dropdown again and selects "1976" AGAIN, I want to run the function again.
$('select').on('change', function (e)
{
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
alert(valueSelected);
});
Simple JS
---------
<html>
<head>
<script>
var prevIndex = "";
function onSelect()
{
var currIndex = document.getElementById("ddList").selectedIndex;
if( currIndex > 0 )
{
if( prevIndex != currIndex )
{
alert("Selected Index = " + currIndex);
prevIndex = currIndex;
}
else
{
prevIndex = "";
}
}
}
</script>
</head>
<body>
<select id="ddList" onClick="onSelect()">
<option value="0">Select Me</option>
<option value="1">List1</option>
<option value="2">List2</option>
<option value="3">List3</option>
</select>
</body>
</html>
This basic idea should work using jQuery using click event:
$('#yourselect').click(function() {
console.log("your function");
});
A simple if statement could prevent firing off the function when initially clicking the select element.
The closest functionality that you're seeking that I can think of is the following:
-HTML-
<select class="opt-evt">
<option value="" selected="selected"></option>
<option value="1976">1976</option>
</select>
-jQuery-
$(document).ready(function(){
$('.opt-evt').change(function(){
$(this).blur();
}).blur(function(){
console.log($(this).find('option:selected').val());
});
});
The caveat is that if the user selects '1976' again, the desired event only gets fired onBlur.
http://jsfiddle.net/4G9Jf/
mouseup event should do the trick:
$('select').mouseup(function(){
console.log("hue");
});
http://jsfiddle.net/5Fcgr/
note that this will be triggered twice when a new value is selected in the listbox. Once when opening the options, and once when selecting an option.
I have fixed as below,
<html>
<head>
<script>
function onSelect()
{
var dd = document.getElementById('ddList');
var txtTerms = document.getElementById('selValue');
var storeLstSlct = document.getElementById('checkIndx');
var slctdValue = '';
if(dd.selectedIndex == 0)
{
return false;
}else if(storeLstSlct.value == dd.options[dd.selectedIndex].value)
{
storeLstSlct.value = 'abcd';
return false;
}else
{
slctdValue = dd.options[dd.selectedIndex].value;
if(txtTerms.value != '')
txtTerms.value = txtTerms.value + ' , ' + slctdValue;
else
txtTerms.value = slctdValue;
storeLstSlct.value = slctdValue;
}
}
</script>
</head>
<body>
<select id='ddList' onclick='onSelect()'>
<option value='0'>Select Me</option>
<option value='One'>List1</option>
<option value='Two'>List2</option>
<option value='Three'>List3</option>
</select>
<input type='hidden' name='checkIndx' id='checkIndx' />
<input type='text' name='selValue' id='selValue' />
</body>
</html>
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 am trying to get John Resig's jQuery Live Search with Quicksilver Style to work with a select multi form control. His code is based John Nunemaker's Work developing his quicksilver.js code.
The problem I am having is that within a select box only Firefox supports .hide() on option values, I can't figure out a snappy approach for IE, Safari, Opera and Chrome.
Here is an example, I have inlined John R's code but you will need to grab quicksilver.js and host it locally yourself. Again this works great in Firefox but the call to rows.hide() does nothing on other browsers.
I have tried wrapping the tags in in a div and hiding that but no luck.
Any ideas?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>LiveSearch</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="../jquery/quicksilver.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#q').liveUpdate('#posts').focus();
});
jQuery.fn.liveUpdate = function(list){
list = jQuery(list);
if ( list.length ) {
// Changed 'li' to 'option' below
var rows = list.children('option'),
cache = rows.map(function(){
return this.innerHTML.toLowerCase();
});
this
.keyup(filter).keyup()
.parents('form').submit(function(){
return false;
});
}
return this;
function filter(){
var term = jQuery.trim( jQuery(this).val().toLowerCase() ), scores = [];
if ( !term ) {
rows.show();
} else {
rows.hide();
cache.each(function(i){
var score = this.score(term);
if (score > 0) { scores.push([score, i]); }
});
jQuery.each(scores.sort(function(a, b){return b[0] - a[0];}), function(){
jQuery(rows[ this[1] ]).show();
});
}
}
};
</script>
</head>
<body>
<form method="get" autocomplete="off" action="">
<div>
<input type="text" value="" name="q" id="q"><br><br>
<select id="posts" multiple name="choices" SIZE="10" style="width: 250px">
<option value="1">The Well-Designed Web</option>
<option value="2">Welcome John Nunemaker</option>
<option value="3">Sidebar Creative: The Next Steps</option>
<option value="4">The Web/Desktop Divide</option>
<option value="5">2007 in Review</option>
<option value="6">Don't Complicate the Solution</option>
<option value="7">Blog to Business</option>
<option value="8">Single Line CSS</option>
<option value="9">The Great Divide</option>
<option value="10">What's in a Name?</option>
</select>
</div>
</form>
</body>
</html>
The best approach is just to add and remove options from the DOM.
Like this:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#q').liveUpdate('#posts').focus();
});
jQuery.fn.liveUpdate = function(list){
list = jQuery(list);
if ( list.length ) {
// Changed 'li' to 'option' below
var rows = list.children('option'),
cache = rows.map(function(){
return this.innerHTML.toLowerCase();
});
var all = rows;
all.each(function(i){
$(this).attr("itext", this.innerHTML.toLowerCase());
});
this
.keyup(filter).keyup()
.parents('form').submit(function(){
return false;
});
}
return this;
function filter(){
var term = jQuery.trim( jQuery(this).val().toLowerCase() ), scores = [];
if ( !term ) {
list.append(all);
} else {
rows.remove();
all.each(function(i){
var score = $(this).attr("itext").score(term);
if (score > 0) { scores.push([score, i]); }
});
jQuery.each(scores.sort(function(a, b){return b[0] - a[0];}), function(){
list.append(all[this[1]]);
});
rows = list.children('option');
}
}
};
</script>
EDIT:
Need to score over array "all" rather than rows.