I have a form which has multiple <select> drop-down boxes. I wish to pass the value in these drop-down boxes as an array to a JavaScript function.
Currently my code is like:
<select name="findByMaterial" onChange="filterFilms('Material',this.value)">
{% for film in all_films %}
<option value="{{film.f_material}}">{{film.f_material}}</option>
{% endfor %}
</select>
Where all_films is a variable from Django framework (Most probably you need not concern yourself with it).
What I want to do is that even if I have multiple selects with different names such as findByMaterial and findByColor, and I change the findByColor, then it should call the filterFilms(String,Value) JS function.
Any pointers in the right direction would be appreciated a lot.
PS: This question is probably similar to how to pass array values to JavaScript function from html onchange action?, but it is definitely not what I am looking for.
CLarification:
I wish to create a filter. Thus I would want to be able to access the attribute of color as well as material.
Online Demo : http://jsfiddle.net/thefourtheye/jRym8/
<html lang = "en">
<head>
<title> Document </title>
<script>
function filterFilms(selectBox) {
var displayArea = document.getElementById("displayArea");
displayArea.innerHTML = selectBox.id + "," + selectBox.value + "," + selectBox.selectedIndex + "," +
selectBox.options[selectBox.selectedIndex].text;
}
</script>
</head>
<body>
<select onchange="filterFilms(this);" id="films">
<option value="film1">Film Text 1</option>
<option value="film2">Film Text 2</option>
<option value="film3">Film Text 3</option>
</select>
<select onchange="filterFilms(this);" id="colors">
<option value="color1">Color 1</option>
<option value="color2">Color 2</option>
<option value="color3">Color 3</option>
</select>
<div id="displayArea"/>
</body>
</html>
You can use the same function to do this. Pass the current element as the parameter. And
You can get the id of the select box clicked with selectBox.id
You can get the selected option's value with selectBox.value
You can get the selected option's index with selectBox.selectedIndex
You can get the selected option's text with selectBox.options[selectBox.selectedIndex].text
Related
I am on beginning of the coding life. I am trying to change text in span with selected option, but it gives me values not texts. For example, when I select the bus option, I want it to shows me the "bus" text. I do not want value number. Thanks in advance.
<select id="vehicles" onchange="showChange()">
<option value="1">Bus</option>
<option value="2">Car</option>
<option value="3">Plane</option>
</select>
<span id="vehicle"></span>
<script>
function showChange(){
var selected_vehicle = document.getElementById("vehicles").value;
document.getElementById("vehicle").innerText = selected_vehicle;
}
</script>
You can first pass this keyword to the function then get the text using selectedIndex of option.
<select id="vehicles" onchange="showChange(this)">
<option value="1">Bus</option>
<option value="2">Car</option>
<option value="3">Plane</option>
</select>
<span id="vehicle"></span>
<script>
function showChange(el){
var selected_vehicle = el.options[el.selectedIndex].text;
document.getElementById("vehicle").innerText = selected_vehicle;
}
</script>
If you keep the inline declarations from your HTML ( generally the preferred approach ) you can assign your event handlers in a separate file. Also, as a point of note - if you submit the form data in the traditional manner ( rather than with AJAX etc ) then the select element needs a name - an ID will NOT appear in the REQUEST array!
document.querySelector('select[name="vehicles"]').addEventListener('change',e=>{
e.target.nextElementSibling.textContent=[ e.target.value, e.target.options[e.target.options.selectedIndex].text].join(' ')
})
<select name='vehicles'>
<option selected hidden disabled>Select mode of transport
<option value='1'>Bus
<option value='2'>Car
<option value='3'>Plane
</select>
<span id='vehicle'></span>
I am attempting to display a selection of rows from an sql table that is passed to my webpage through flask. Which rows are selected depends on a value that is selected from an HTML dropdown list (one of the columns in the table is id. I need the rows whose id corresponds to the selected value from the form):
<form name="dropdownForm" style="padding:10px 0px 0px 20px" onchange="calldropdown(this.value)">
<select name="dropdownselection" id='dropdownresult'>
<option value=1>Option 1</option>
<option value=2>Option 2</option>
<option value=3>Option 3</option>
</select>
</form>
At the moment, I am passing the result from this form to a javascript function, but so far, have only been able to display the selected value from the form, instead of what I need:
<p id = areatodisplay"></p>
function calldropdown(dropdownresult) {
var result= document.getElementById('dropdownresult').value
document.getElementById("areatodiaplsy").innerHTML = result;
}
I need some help with where to go from here though - is what I want even feasible? I need the displayed data to change whenever the a new selection is made in the dropdown list, without the page refreshing - hence the javascript.
I have attempted to use jinja tags in my javascript function as part of the innerHTMLline, resulting in syntax errors:
document.getElementById("areatodiaplsy").innerHTML = {% for i in getInfo %} {% if i.id == result %} {{i.name}} {% endif %} {% endfor %};
For completeness, the flask code I am using:
#app.route('/live')
def live():
return render_template('live.html', getInfo=Info.query.all())
Try this - it works.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function calldropdown(dropdownresult) {
document.getElementById("areatodisplay").innerHTML = dropdownresult;
}
</script>
</head>
<body>
<select name="dropdownselection" id='dropdownresult' onchange="calldropdown(this.value)">
<option value=1>Option 1</option>
<option value=2>Option 2</option>
<option value=3>Option 3</option>
</select>
<p id="areatodisplay"></p>
</body>
</html>
I am looking to add text to a textbox with the selected text from the dropdown menu and place a ',' after.().
<select>
<option value="1">This</option>
<option value="2">is</option>
<option value="3">test</option>
</select>
Now when you select the option 'is' the textbox gets updated with 'is,'. Now still on the same page you select 'This' the textbox gets updated with 'is, This,'. Reload the page and do it the other way around and you get 'This, is,'.
Hope you understand what I am trying to do here, the will contains values from the database so I cannot know what the values are exactly.
Thanks in advance.
I think something like this should work:
<select id="dropdownId">
<option value="1">This</option>
<option value="2">is</option>
<option value="3">test</option>
</select>
<input id="textboxId" type="text" />
<script type="text/javascript">
$('#dropdownId').on('change', function () {
$('#textboxId').val($('#textboxId').val() + $('#dropdownId option:selected').text() + ', ');
});
</script>
Fiddle
I'm trying to figure out how to sync two multiple choice lists in javascript. Here's the code which works:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
</head>
<script language="JavaScript">
<!--
function SelectEmail(name)
{
var listboxEmails = document.getElementById('emails');
for (var i=0;i<listboxEmails.length;i++)
{
listboxname = listboxEmails[i].innerHTML
if (listboxname == name)
{
listboxEmails.selectedIndex = i;
break;
}
}//end for
}//end function SelectEmail
// -->
</script>
<body>
<select id='names' name ='names' style = "width: 100" multiple="multiple" onClick="SelectEmail(this.value);">
<option value ="joe">joe</option>
<option value ="albert">albert</option>
<option value ="gary">gary</option>
<option value ="ace">ace</option>
</select>
<select id="emails" name ="emails" style = "width: 100;" multiple="multiple">
<option value ="joe#asds.com">joe</option>
<option value ="albert#asds.com">albert</option>
<option value ="gary#asds.com">gary</option>
<option value ="ace#asds.com">ace</option>
</SELECT>
</body>
</html>
However I want to make it show multiple choices. So for example if I choose albert and gary on the left list, I want the right list to select albert and gary as well. Please help me with this. Cheers.
Your function SelectEmail() can't work because it sets selectedIndex of your select, which selects one option and deselects the rest. Also, you are using the text content of the options in #emails in order to map them with the values of #names. That's not a good practice, because text nodes are supposed to show text and not to enable the identification of elements in your script.
Instead, you can access the selected attribute separately for each option you want to select. By adding an additional attribute to your #emails element's options, it could look like:
<select id="emails" name="emails" style="width: 100;" multiple="multiple">
<option value="joe#asds.com" data-name="joe">joe</option>
<option value="albert#asds.com" data-name="albert">albert</option>
<option value="gary#asds.com" data-name="gary">gary</option>
<option value="ace#asds.com" data-name="ace">ace</option>
</select>
You can now use the data-name attribute to map the options, for example in the following way:
function selectEmail() {
// deselect all
$('#emails option').removeAttr('selected');
var names = $('#names').val();
if (names == null) {
// none selected
return;
}
$.each(names, function (i, name) {
var selector = 'option[data-name="' + name + '"]';
$('#emails ' + selector).attr('selected', true);
});
}
Here's a working fiddle (you will notice that I also used the onchange event instead of onclick:
http://jsfiddle.net/H9hNH/2/
I am trying to figure out a way to display a some text based on the drop down item selected by the user, in the "result" div below. I know how to do this with a normal input field but I am having trouble understanding how to pass in "option values" into the javascript function. This is what I tried so far...
In the code below, I am simply trying to successfully pass whatever drop down item value is selected into the javascript function and print out the name of that value in the "result" div... once I am able to do that, I will implement the 'tip' feature described above.
My Markup:
<select onChange="dropdownTip(this.value)" name="search_type" style="margin-right:10px; margin-top:2px;">
<option selected="selected" value="fruit_search">fruits</option>
<option value="veggies_search">veggies</option>
<option value="animals_search">animals</option>
<option value="all_search">all</option>
</select>
<div id="result"></div>
My JavaScript:
<script type="text/javascript">
function dropdownTip(value){
document.getElementByID("result").innerHTML = value;
}
</script>
Is this what you wanted? check the fiddle below
http://jsfiddle.net/b6ydm/
Try this:
<select onChange="dropdownTip()" id="select" name="search_type" style="margin-right:10px; margin-top:2px;">
<option selected="selected" value="fruit_search">fruits</option>
<option value="veggies_search">veggies</option>
<option value="animals_search">animals</option>
<option value="all_search">all</option>
</select>
<div id="result"></div>
<script type="text/javascript">
function dropdownTip(){
var value = document.getElementById('select').value;
document.getElementByID("result").innerHTML = value;
}
</script>