Trying something that sounds simple but not working:
Allow a user to select an option from a dropdownlist and then have this displayed as an alert each time the user changes it. Here's what I've got so far:
<select name="pickSort" id="chooseSort" onchange="changedOption">
<option value="lowHigh" id="lowHigh">Price Low-High</option>
<option value="highLow" id="lowHigh">Price High-Low</option>
</select>
<script>
function changedOption() {
var sel = document.getElementsByName('pickSort');
var sv = sel.value;
alert(sv);
}
</script>
A better way of doing this without the inline stuff:
document.getElementById("chooseSort").onchange = function() {
alert(this.value);
};
jsFiddle here.
You need to call the function with parentheses changedOption()
<select name="pickSort" id="chooseSort" onchange="changedOption()">
Related
I recently posted about a problem I was having with not being about to ge the .val() from a selected dropdown. The code was correct but something was preventing the on change from firing correctly. I've narrowed the issue down and found when I remove the select box plugin it works as expected.
Can someone please help me get both to work, I'd like to keep select box on these dropdown && also write my own function that will pick up the selected value.
thanks.
Relevant code:
<div class="form-group">
<select name="numberOfAdults" id="numberOfAdults" tabindex="2">
<option>-Adults-</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</div>
In script.js
//---------------------------------------------------
//------------------- Selectbox -------------------
//---------------------------------------------------
$(function () {
$("#numberOfAdults").selectbox();
$("#numberOfKids").selectbox();
$("#eventAttending").selectbox();
});
mt script that doesn't give me the value, instead it will also give '-Adults- - -Adults-'
<script>
$('#numberOfAdults').change(function() {
var val1 = this.value;
var val2 = $('#numberOfAdults option:selected').val();
alert(val1 + " - " + val2);
});
result:
You can try something like this:
$('#numberOfAdults').selectbox({
onChange: function (val, inst) {
alert(val);
}
});
Documentation: http://www.bulgaria-web-developers.com/projects/javascript/selectbox/
I'm trying to post a custom data attribute on a select box option to a hidden form field.
Here's my html:
<select id="sampleorder" multiple="multiple">
<option value='xxx' data-amount='5'>Name</OPTION>
<option value='xxx' data-amount='15'>Name</OPTION>
<option value='xxx' data-amount='2'>Name</OPTION>
</select>
And jQuery
$('#submit_btn').click(function() {
var options = $('select#sampleorder');
var samplesSelected = options.val();
$('input[name=order]').val(samplesSelected);
$('input[name=quantity]').val(sampleAmount);
});
I'm guessing that my variable "sampleAmount" should look somewhat like this
var sampleAmount = options.val().data("amount");
But it's not giving me the expected results.
What would be a good approach to get the data attribute value per item?
Thanks!
why use jQuery? Just use event.target.options[event.target.selectedIndex].dataset.amount
Try this:
$('#submit_btn').click(function() {
var samplesSelected = $('#sampleorder').val(),
sampleAmount = $('#sampleorder option:selected').data("amount");
$('input[name=order]').val(samplesSelected);
$('input[name=quantity]').val(sampleAmount);
});
In pure vanilla javascript you can use :
var sampleAmount = this.selectedOptions[0].getAttribute('data-amount'));
Example:
function SelectChange(event) {
console.log(event.selectedOptions[0].getAttribute('data-amount'));
}
<select onchange="SelectChange(this)">
<option data-amount="1">one</option>
<option data-amount="2">two</option>
<option data-amount="3">three</option>
</select>
Try this,
HTML
Add id attribute to your select drop down
like
<select id="sampleorder" >
....
SCRIPT
var sampleAmount = $('select#sampleorder option:selected').data("amount");
Fiddle http://fiddle.jshell.net/3gCKH/
Another vanilla JS answer:
var selectContainer = document.getElementById('sampleorder')
var selectedOption = selectContainer.selectedOptions.item()
var amount = selectedOption.getAttribute('data-amount')
I forgot to mention it has to be a multi select box, sorry.
With your help and a brief look into the jQuery documentation I've managed to solve it:
$("select#sampleorderm").change(function () {
var samplesSelected = options.val().join("::");
var samplesAmount = "";
$("select#sampleorderm option:selected").each(function () {
samplesAmount += $(this).data("amount") + " ";
});
$('input[name=sampleorder]').val(samplesSelected);
$('input[name=sampleorderquantity]').val(samplesAmount);
});
I have a script like this
<script type="text/javascript">
function showSelected(val){
document.getElementById
('selectedResult').innerHTML = "The selected number is - "
+ val;
}
</script>
<div id='selectedResult'></div>
<select name='test' onChange='showSelected(this.value)'>
<option value='1'>one</option>
<option value='2'>two</option>
</select>
The output is shown with
<div id='selectedResult'></div>
So, I want to use this a variable
Actually, I want to get drop down box value with out submit. This script make it, but I can use another suggestions
Thanks
I'm not sure I really understand the question, but if you want to get what's stored in the DIV, use:
var stuff = document.getElementById('selectedResult').innherHTML;
I can suggest you another alternative i think is more useful and you can use it in different way # your project.
In this example you click the options you one and insert them to option list, you can send them from your select name=test if you want, you just need to change it.
DEMO
This is the script you can catch item,links,images,attributes and add them to select box:
$(document).ready(function(){
$('li').on('click',function(){
$('#theSelect').append('<option SELECTED>'+$(this).find('img').attr('value')+'</option>');
var seen = {};
$('option').each(function() {
var txt = $(this).text();
if (seen[txt])
$(this).remove();
else
seen[txt] = true;
});
});
})
$('#del').click(function() {
var $list = $('#theSelect option');
var d = $list.length;
var b=($list.length-1);
$('#theSelect option:eq('+b+')').remove();
});
I am trying to create a function to run when a select option is changed. In my select menu i have;
<form id="frame">
<select id="frame_color" onchange="fChange()">
<option value="0">Polished Black</option>
<option value="1">Grey</option>
</select>
</form>
The only thing that I want the fChange() function to do is update the variable that is holding the options value with the onchange value. So, the variable in the function fChange starts off by holding the value "0", and when I change it to "Grey" I want the variable to update to "1". I am having a hard time figuring out how to code the function properly. Any suggestions?
following get the selected option value ...
function fChange()
{
var val = $("#frame_color").val();
}
fChange = function(){
var value = document.getElementById("frame_color").value;
alert(value);
}
try this, which is jQuery
<script type="text/javascript">
$(document).ready(function () {
$('#frame_color').change(function(){
// your code should be here
});
});
</script>
on jQuery:
$(function(){
$('#frame_color').on('change',function(){
your_variable = $(this).val()
});
});
for non-jQuery, a quick way to do it is:
document.getElementById('frame_color').onchange = function(e){
your_variable = e.target.value;
}
also, you might want to look at addEventListener for standards-compliant browsers, and attachEvent for IE6-8
var variable = 0;
function fChange()
{
var val = document.getElementById("frame_color").value;
variable = val;
}
<form id="frame">
<select id="frame_color" onchange="fChange()">
<option value="0">Polished Black</option>
<option value="1">Grey</option>
</select>
</form>
First, I have this input in a form.
<select id="entry_14">
<option value="Woman">Woman</option>
<option value="Man">Man</option>
</select>
Then I declared this variable.
var mygender = document.getElementById('entry_14').value;
but then, when I document.write, it already shows "Man" before the user even makes a selection, and after selecting woman, it still shows man.
How can I set the value of this variable to change, each time the user selects one of the options?
It executes immediately because your code is not in a function. You need to call this function when the select changes. Add an onchange handler to your select. In this example I pass this.value which is your select lists value to the function. Finally you can do whatever you want with that value.
<select id="entry_14" onchange="myfunction(this.value);">
<option value="Woman">Woman</option>
<option value="Man">Man</option>
</select>
<script>
function myfunction(val) {
document.write(val);
}
</script>
Declare a onchange event handler.
document.getElementById('entry_14').onchange = function(){
var mygender = this.value;
document.write(mygender);
}
Add a onChange JS handler to the <select> element. The example below shows an inline way of doing this...
<select id="entry_14" onChange="updateMyGender();">
....
</select>
<script>
var mygender = document.getElementById('entry_14').value;
function updateMyGender()
{
mygender = document.getElementById('entry_14').value;
}
</script>
I think you are looking for this
var mygender= document.getElementById('entry_14');
var gender= mygender.options[mygender.selectedIndex].value;// for value
var gender= mygender.options[mygender.selectedIndex].Text;//for text