I have the next code with a Select:
http://jsfiddle.net/pdkg1mzo/18/
The problem is that I want to launch the alert every time a select option is clicked, although the option that was clicked is the one that is currently selected.
This may work:
$(function(){
$(".normal").on("change",function(){
//alert("trigger");
var selectedName = $('#selectId').find(":selected").text();
console.log('selectedName is: ', selectedName)
alert(selectedName)
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="normal" id="selectId">
<option value="18">John</option>
<option value="18">Lorry</option>
<option value="19">Jerry</option>
<option value="20">Smith</option>
</select>
You could add a half second delay to the alert, so it shows the name after the selection has been made:
$(function(){
$(".normal").on("change",function(){
//alert("trigger");
var selectedName = $('#selectId').find(":selected").text();
console.log('selectedName is: ', selectedName)
setTimeout(function () {
//do something once
alert(selectedName)
}, 500);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="normal" id="selectId">
<option value="18">John</option>
<option value="18">Lorry</option>
<option value="19">Jerry</option>
<option value="20">Smith</option>
</select>
Try this,
$(function(){
$(".normal option").on("click",function(){
alert("trigger");
});
});
try this,
<select class="normal" name="mysel" onChange="show(this);">
<option value="18">John</option>
<option value="18">Lorry</option>
<option value="19">Jerry</option>
<option value="20">Smith</option>
</select>
pure javascript
<script>
function show(m){
var k=m.options[m.selectedIndex].value;
alert(k);
}
</script>
Try this it perfectly works.
I think you can't do this, but perhaps you can try Chosen: https://plugins.jquery.com/chosen/.
I don't know why do you want to do this, do you want to reload de page, load Ajax results. Maybe it is unnecessary for user experience and you will not improve it at all.
Related
Assuming I have a multiple select list like:
<select name="persons" id="persons" multiple size="8">
<option id="captureMe">Test option</option>
<option value="" disabled="disabled">─────────</option>
<option value="FR">Franck</option>
<option value="GE">Georges</option>
<option value="DA">David</option>
<option value="LU">Luc</option>
<option value="DO">Donald</option>
<option value="FR">FRANCOIS</option>
</select>
What event can I bind on $("#captureMe") ?
I tried some scripts like
$("#captureMe").change(function() {alert("got it!");});
$("#captureMe").on("change", function() {alert("got it!");});
$("#persons").on("change", "#captureMe", function() {alert("got it!");});
But none of these works nor with the click event.
So my question is, what event can I bind to an option in a select multiple ?
I don't wont the event being fired from the select but from the option by itself
(The goal could be firing an ajax call when a specific option is changed)
You can use click event instead of change:
$("#captureMe").on('click', function(){
console.log("got it!");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="persons" id="persons" multiple size="8">
<option id="captureMe">Test option</option>
<option value="" disabled="disabled">─────────</option>
<option value="FR">Franck</option>
<option value="GE">Georges</option>
<option value="DA">David</option>
<option value="LU">Luc</option>
<option value="DO">Donald</option>
<option value="FR">FRANCOIS</option>
</select>
Please, take a look to the following code:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<select name="persons" id="persons" multiple size="8">
<option id="captureMe">Test option</option>
<option value="" disabled="disabled">─────────</option>
<option value="FR">Franck</option>
<option value="GE">Georges</option>
<option value="DA">David</option>
<option value="LU">Luc</option>
<option value="DO">Donald</option>
<option value="FR">FRANCOIS</option>
</select>
</body>
<script>
$("#persons").change(function() {
var values = $("#persons").val();
if($.inArray($("#captureMe").val(), values) > -1){
if(!$("#captureMe").prop("isSelected")){
$("#captureMe").prop("isSelected", true);
console.log("'caputreMe' is selected");
}
}else{
if($("#captureMe").prop("isSelected")){
$("#captureMe").prop("isSelected", false);
console.log("'caputreMe' is unselected");
}
}
});
</script>
</html>
I hope it helps you. Bye.
$(document).on("change", "#persons", function() {alert("got it!");});
You can for example use the :selected selector, see https://api.jquery.com/selected-selector/
$("select").change(function() {
$("#captured-by-id:selected").each(function() {
alert($(this).text());
});
});
Here's a Fiddle.
isn't it possible to make it work in following way?
var selectedValue = "";
$("#persons").change(function() {
var values = $(this).val();
if()// condition to check if #captureme option is present in "selectedValue" variable
{
// logic
}
else if() // condition to check if #captureme was not present in "selectedValue" before and is selected now
{
// logic
}
selectedValue = value;
});
function RecupText2() {
var ajaxRequest = ajaxFunction();
ajaxRequest.open("GET","ajax2.php",true);
ajaxRequest.onreadystatechange = function(){
if( ajaxRequest.readyState==4 && ajaxRequest.status==200){
document.getElementById("remplir").innerHTML= ajaxRequest.responseText;
}
}
ajaxRequest.send(null);
}
var interval = setInterval(RecupText2, 1000);
the setinterval updates the select list every second, which changes the selected value to the first option! thank you!
You could use the HTML5 Data Attribute to store the selected option.
Here; below, is an Example. This example requires & assumes the use of JQuery...
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript">
(function($) {
/** THE DOM HAS FULLY LOADED & NOW JQUERY CAN INTERACT WITH IT... */
$(document).ready(function(){
//RESET THE data-selected ATTRIBUTE EACH TIME THE VALUE OF THE SELECT DROP-DOWN CHANGES
$("#options-list").on("change", function(evt){
$(this).attr("data-selected", currentElem.val());
});
// MAKE SURE TO SET THE VALUE OF THE SELECT TO THE VALUE OF THE data-selected ATTRIBUTE AT EACH INTERVAL CHANGE
// SO WITHIN THE CODE THAT UPDATES THE SELECT, DO LIKE SO
$("#options-list").val( $("#options-list").attr("data-selected") );
});
})(jQuery);
</script>
</head>
<body>
<select name="options-list" id="options-list" class="options-list" data-selected="3">
<option value="10">Ten</option>
<option value="9">Nine</option>
<option value="8">Eight</option>
<option value="7">Seven</option>
<option value="6">Six</option>
<option value="5">Five</option>
<option value="4">Four</option>
<option value="3">Three</option>
<option value="2">Two</option>
<option value="1">One</option>
</select>
</body>
</html>
Hope this helps a bit....
does anyone know if there is a way to make a dropdown menu that when an option is chosen it then turns that option into a button using html or is that only possible in php or is it not possible at all
You will have to learn javascript to be able to do that, there is an event fired called onselect, when you bind to that event with javascript using addEventListener you will be able to read the .value of the <select> field and then create a button using the createElement method.
Try this with jQuery
<script>
$(document).ready(function(){
var sel_html = $('#element_place').html();
$('#select_button').change(function(){
var sel_option = $('#select_button').val();
$('#select_button').remove();
new_ele = $('<input>').attr('type','button').attr('value',sel_option);
$('#element_place').append(new_ele);
});
});
</script>
<div id="element_place">
<select id="select_button">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
You can use this its working
Html
<input type="button" id="conv_but" value="" style="display:none">
<select name="data_select" id="data_select" onchange="converttobutton(this.value);">
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
<option value="Four">Four</option>
<option value="Five">Five</option>
<option value="Six">Six</option>
</select>
Javascript
<script type="text/javascript">
function converttobutton(selected)
{
document.getElementById('conv_but').value = selected;
document.getElementById('data_select').style.display = 'none';
document.getElementById('conv_but').style.display = '';
}
</script>
I think you need change() event handler . Create a function inside the change() event for creating the button
$("ID of the dropdownbox").change (function () {
//code for creating button(this.value) give the selected option
var $something= $('<input/>').attr({ type: 'button',
name:'btn1', value:this.value});
//append this variable inside a div having ID `button_div`
$("#button_div").append($something);
});
I'm trying to achieve one simple requirement, but couldn't make it!
My requirement is very simple - wanna display some alert to the user based on the options he selects from the drop down.
Below is the code, I've designed now. Please check and correct me where I'm going wrong.
<SCRIPT type="text/javascript">
var txt = this.getField("ddPortfolio").value;
If(txt == "Distribution")
window.alert("distribution");
</SCRIPT>
<div style="float:right">
<select name = "ddPortfolio">
<option value="volvo">-- Select Option --</option>
<option value="saab">Training</option>
<option value="mercedes">Internal</option>
<option value="audi">External</option>
</select>
</div>
You have some syntax errors. Also there is no Distribution value in your options. I think you want this:
html
<div style="float:right">
<select name = "ddPortfolio" onchange="test(this);">
<option value="volvo">-- Select Option --</option>
<option value="saab">Training</option>
<option value="mercedes">Internal</option>
<option value="audi">External</option>
</select>
</div>
js
function test(obj){
var txt = obj.value;
if(txt == "audi"){
window.alert("audi");
}
}
fiddle
HTML
<select onchange="getval(this);">
<option value="1">One</option>
<option value="2">Two</option>
</select>
SCRIPT
<script type="text/javascript">
function getval(sel) {
alert(sel.value) ;
}
</script>
Simple Drop down box working using javascript.
You checked If(txt == "Distribution") but that was not one of the options in your select in the code you provided. also it's the onchange triegger you need
You also need to add an id to the select so you can reference it for example
HTML snippet
<select name = "ddPortfolio" id = "ddPortfolio">
Javscript
var MyColumn = document.getElementById("ddPortfolio");
MyColumn.onchange = function(){if (MyColumn.value == "audi") {alert('hi');}};
http://jsfiddle.net/64Z7H/
Is is possible to swap a .load text with one that can be edited by a user using form input or something similar? Basically I'm trying to write a code that fetches information using the div IDs (unique per emp) that hold their information within tables within multiple HTML documents for many years.
Example:
.load('day.html #empId')
the "day" and "empid" part of .load can be changed on the user end.
[Link] [ID] submit
then it runs the rest of the script.
The part of the script I'm trying to make adjustable:
$('a').click(function() {
$('#metrics').load('day.html #empId', function() {
$(this).hide()
.appendTo('#main')
.slideDown(500);
});
return false;
})
});
I'm not sure if I explained it clear enough(new to jquery)
Get the selected options of two form select elements, combine into string and insert them into the jQuery .load function.
$('a').click(function() {
var ds = $('#datasources option:selected').text();
var empId = $('#empIds option:selected').text();
$('#metrics').load(ds + '.html #' + empId, function() {
$(this).hide()
.appendTo('#main')
.slideDown(500);
});
return false;
});
And the HTML affected:
<div id="main">
<h1 id="metrics">Metrics</h1>
</div>
JSFiddle: http://jsfiddle.net/a8dTR/ (Open the console to see what's going on. This will give an error because the loading won't work on JSFiddle but you can see it's send the correct argument.)
FIXED IT!!!!!! I'm pretty sure its terrible practice, but it gets the job done(tried it with multiple docs and ids). If anyone has suggestions for a better way I'm all ears
I know it's pretty bare and basic, but here's the code in case anyone else wanted to do something similar
I put back in $<'div id= metrics'/> in order to open it in a new div tag appended to #main
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function () {
$('a').click(function() {
var pD = $('#period').val();
var wD = $('#week').val();
var dD = $('#day').val();
var eD = $('#empId').val();
$('<div id"metrics" />').load(
pD
+ wD
+ dD
+ eD, function(){
$(this).hide()
.appendTo('#main')
.slideDown(1000);
});
});
});
</script>
I then removed then .html # from the function and just added it in as a value to #empId options
<form>
<select class="dates" id="period">
<option value="p00"class="emp">Period</option>
<option value="p01">1</option>
<option value="p02">2</option>
<option value="p03">3</option>
<option value="p04">4</option>
<option value="p05">5</option>
<option value="p06">6</option>
<option value="p07">7</option>
<option value="p08">8</option>
<option value="p09">9</option>
<option value="p10">10</option>
<option value="p11">11</option>
<option value="p12">12</option>
<option value="p13">13</option>
<option value="p14">14</option>
</select>
<select class="dates" id="week">
<option Value="w00"class="emp">Week</option>
<option value="w01">1</option>
<option value="w02">2</option>
<option value="w03">3</option>
<option value="w04">4</option>
<option value="w05">5</option>
<option value="w06">6</option>
</select>
<select class="dates" id="day">
<option value="d00"class="emp">Select Day or Leave Blank for Week</option>
<option value="d01">1</option>
<option value="d02">2</option>
<option value="d03">3</option>
<option value="d04">4</option>
<option value="d05">5</option>
<option value="d06">6</option>
<option value="d07">7</option>
</select>
<select id="empId">
<option class="emp">Employee ID</option>
<option value=".html #JXS0001">John Smith</option>
</select>
Load Metrics
</form>
</div>
<div id="main">
<h1>Metrics</h1>
</div>
I still have a lot of bedazelling to do(such as making the emp id dynamic and editable from a separate html) but that's the fun part(and I know how haha). Anywho thanks a million for helping this newb out #bloodyKnuckles