how to pass variable in jquery .change function - javascript

I have a form with a simple drop-down menu when the user selects any of the options, i want to be able to pass that selected value to a JavaScript function
Once the user clicks on an option it will alert the value in the jQuery change function but I want to use the value that was passed through in other functions but it does not get the value for some reason
function getTweet(){
$('#test').change(function() {
var value = $('#test :selected').val();
});
}
want to use the value outside of the change function but it does not grab it
<form>
<select id="test">
<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>
</select>
</form>

If you want to use the most current value of the drop-down anywhere in your code, you can just reference it like this:
$('#test').val()
I've removed the :selected, because that's not necessary; .val() will give the right value.

You might use custom events to do something based on that event?
Example:
$('#test').change(function () {
$('mysubscriberselectorshere').trigger('gettweet');
});
// do something based on the custom event
$('mysubscriberselectorshere').on('gettweet', function {
// do good stuff here
alert($('#test').val());
});

Related

Hide text before dollar sign character in options without removing completely

I am trying to find a way to select part of the string before the dollar sign in the select menu. Right now I am just trying to hide it so it does not appear in the dropdown, but it will be used later so I do not want to simply strip it out because I will need to be able to use it in a variable when the option is selected.
var seminiars;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select>
<option>1$5,000</option>
<option>2$10,000</option>
<option>5$100,000</option>
<option>10$500,000</option>
</select>
So far I have only been able to remove it completely, but then I was unable to store it and use it when someone selects on of the option.
Side note: I am unable to edit the html directly, the code is automatically generated.
okay... I just noticed the side note.
I am unable to edit the html directly, the code is automatically generated.
The trick here, will be to set a data value for each option.
// Run that loop to set the data values for each option
$("select option").each(function() {
let optionText = $(this).text();
let textSplit = optionText.split("$")
$(this).data("before_dolard_sign", textSplit[0])
$(this).text(textSplit[1])
})
$("select").on("change", function() {
// So on change, you have access to it
console.log($(this).find("option:selected").data("before_dolard_sign"))
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select>
<option>1$5,000</option>
<option>2$10,000</option>
<option>5$100,000</option>
<option>10$500,000</option>
</select>
You can use the value attribute to store more information not in the text visible to the user. I've added some code below to show how you can get the text or value selected by the user.
If that isn't suitable I've also created a test input and button which helps demonstrate how you can split a string in the way you need to.
The code is fully commented.
Let me know if you were hoping for something else.
// Detect when user changes select option
$("#selectTest").change(function() {
// Get the text selected by the user
console.log($("#selectTest option:selected").text());
// Get the value selected by the user
console.log($(this).val());
});
// Add click event
$("#splitButton").click(function() {
// Get input value
var test = $("#splitTest").val();
// Split around dollar sign
var els = test.split("$");
// Print values to show we did it correctly
console.log(els[0]);
console.log("$" + els[1]);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select id="selectTest">
<option value="1$5,000">$5,000</option>
<option value="1$5,000">$10,000</option>
<option value="5$100,000">$100,000</option>
<option value="10$500,000">$500,000</option>
</select>
<input id="splitTest" value="10$500,000">
<button id="splitButton">Show Split</button>
why not place this data onto a data-meta attribute?
instead of
<option>1$5,000</option>
<option>2$10,000</option>
<option>5$100,000</option>
<option>10$500,000</option>
perhaps
<option data-meta="1">$5,000</option>
<option data-meta="2">$10,000</option>
<option data-meta="5">$100,000</option>
<option data-meta="10">$500,000</option>
then you can find the selected option and use element.getAttribute("data-meta") to retrieve the data when you need it
edit: i now see your side-note that you can't edit the html. well, replace it. loop over the html, and use .split on the textContent, and move that meta data into an attribute
Use the data attribute to store the info and then run an event listener to retrieve the dataset when selected on change?
const select = document.querySelectorAll('#money');
select.forEach((val) => {
if (val.value != 'undefined') {
val.addEventListener('change', () => {
let data = val.options[val.selectedIndex].dataset['num'];
console.log(data)
})
}
});
<select id="money">
<option style="display: none;">-->Select an option below<--</option>
<option data-num='1' class='opt' value='5000'>$5,000</option>
<option data-num='2' class='opt' value='10000'>$10,000</option>
<option data-num='5' class='opt' value='100000'>$100,000</option>
<option data-num='10' class='opt' value='500000'>$500,000</option>
</select>

In select2,why should I have to put the $('select').val(); to the click() function

You know ,I just learning about select2.I need to get the value of the selected option,I know I should do like this:
$('select').val();
So I just write a simple problem like this :
HTML:
<button id="clickIt">click</button>
<p>SELECT NUMBER</p>
<select id='first'>
<option value='1'>First</option>
<option value='2'>Second</option>
<option value='3'>three</option>
</select>
<p id="set1"></p>
I have also add Jquery and select2 library.
when I write JS ,I found this:
$(document).ready(function(){
$("#first").select2();
//var a=$("#first").val(); // it always alert 1,so a always equals 1.
$('#clickIt').on("click",function(){
var a=$('#first').val(); // that is the resule what I want .
alert(a);
})
})
I want to know why var a=$('#first').val(); put another position will have another effect?
Because $("#first").val(); returns the currently selected value not the future one. So, when you call $("#first").select2(); and you try to retrieve the value you will get the currently selected value.
But when you call $("#first").val(); inside the click event, each time you click #clickIt then $("#first").val(); will be called and return the newly selected value.
I hope this will make sense to you.

pass current selected option to javascript function

I have a multiple select list. on select for an option from the list,I am calling a javascript function. I want to pass the current selected option object to this javascript function.
How can I do this? I tried following but its not working.
<select onClick="callJavascriptFun(this.option);" >
</select>
for getting the selected option, try the following code:
<select onchange="callJavascriptFun(this.options[this.selectedIndex]);" >
</select>
inside the callJavascriptFun function you will get of course the selected option.
Make it easier with event handler:
html part
<select class="list">
</select>
js part:
$('select.list').change(function(){
var selectedOption = $('option:selected', $(this)); // your selected option object(element)
var current = $(this).val(); // your selected option value
....
});

Using multiple div id's with same piece of script

I have several select boxes on a page, and basically anytime an onchange event occurs with any of those boxes I want to use the same piece of code instead of making a separate script for each select box's id. The reason is that I could be ending up with dozens of these select boxes on a page and all that repeated code just gets messy.
<select name="drop_list_menu_1" id="drop_list_menu_1">
<option value="letter:a">A</option>
<option value="letter:b">B</option>
<option value="letter:c">C</option>
</select>
<select name="drop_list_menu_2" id="drop_list_menu_2">
<option value="letter:a">A</option>
<option value="letter:b">B</option>
<option value="letter:c">C</option>
</select>
<select name="drop_list_menu_3" id="drop_list_menu_3">
<option value="letter:a">A</option>
<option value="letter:b">B</option>
<option value="letter:c">C</option>
</select>
My code to handle the onchange event:
<script type="text/javascript">
$(document).ready(function () {
// if user chooses an option from the select box...
$("#drop_list_menu_1").change(function () {
//doin some stuff
});
</script>
So, how can I get this:
$("#drop_list_menu_1").change(function () {
//doin some stuff
});
to catch any of the select boxes on the page being used? Something incorporating a regex?
Give the elements a common class (you can keep the id attributes if you want) and then use delegation:
$(document).on("change", "your-select-class", function() {
var changedElement = this;
// ...
});
You just need that one call to set up the event handler, and it'll work for as many copies as you need on the page.
You could use jQuery's attribute starts-with selector to select all drop-downs whose name begins with "drop_list_menu_":
$("select[name^='drop_list_menu_']").change(function(){
//doin some stuff
});
Assign same class to each Select and call it as below.
$(".ClassName").change(function (e) {
var SelectId = e.target.id
});
simple as that
$("select").change(function () {
alert('a');
});

How pass selected index value to a change function

I have a select menu that looks like this:
<select id ="cal-category-select">
<option value="/event-sort/list/2009/9/sports/">Sports Events</option>
<option value="/event-sort/list/2009/9/fine-arts/">Fine Arts Events</option>
...
</select>
When the user selects an option from the select, I need to pass the option value attribute to this function as event data, it's the second parameter:
$('#cal-category-select').bind('change.filter', need_value_attribute_here, update_cal);
The update_cal function referenced receives the data passed in from the second parameter and using to get some ajax content.
Any idea how I can do that? I haven't been able to get it to work.
I have tried this:
var category_url = $('#cal-category-select option:selected').attr('value');
$('#cal-category-select').unbind().bind('change.filter', category_url, update_cal);
but that only returns the first option value in the list.
You would just use:
$("#cal-category-select").val()
alternative longer syntax:
$('#cal-category-select option:selected').val()
$('#cal-category-select').bind('change.filter', function(){
update_cal($(this).val());
});
For the selected <option> value, it should just be
$('#cal-category-select').val();

Categories