I've got a multiple select like this configured to auto-populate:
<select id="multiple-select-box" class="selectivity-input" data-placeholder="Type to search condos" multiple>
<option id="Alabama Grove Terrace" value="Alabama Grove" >Alabama Grove Terrace</option>
<option id="Alden Pines" value="Alden Pines" >Alden</option>
</select>
Upon select I realized the script is submitting the visible Text for each option instead of the value="" for each option chosen.
I tried to change var t=$(this).text(); to var t=$(this).value(); thinking that would grab the value instead of the option text but had the same results. What am I missing?
<script>
$(document).ready(function() {
$("#bySub").submit(function(){
$(".selectivity-multiple-selected-item").each(function(){
var t=$(this).text();
//if()
$(".ml").append("<option selected='selected'>"+t+"</option>");
});
})
$('#multiple-select-box').selectivity();
});
</script>
Ok, so I went to check this selectivity plugin you're using and it converts your select into a series of divs as
<div class="selectivity-results-container">
<div class="selectivity-result-item highlight" data-item-id="Alabama Grove">Alabama Grove Terrace</div>
<div class="selectivity-result-item" data-item-id="Alden Pines">Alden</div>
</div>
you have to change your submit function to get the data-item-id property which corresponds to your original select value like
$("#bySub").submit(function(){
$(".selectivity-multiple-selected-item").each(function(){
var t=$(this).data("item-id");
$(".ml").append("<option selected='selected'>"+t+"</option>");
});
edit
fiddle example
In this line, you are appending options to the select, but you have set no value attribute:
$(".ml").append("<option selected='selected'>"+t+"</option>");
As stated in the comments, the "fetch value" method of a form element in jQuery is:
$(this).val()
You might be confusing it with the JavaScript property:
this.value
...which also works. Both return an array of strings if something is selected and set to "multiple"
To follow up on your comment, I don't see your markup for the selected element with class="ml" thus it's almost impossible to debug why your form isn't submitting the values without seeing the bigger picture (i.e. it may be outside the form element). You could try adding the value property to the select element however jQuery should be able to pick up selected options missing the value property by using the text value instead.
Related
Firstly apologies if this is a dumb question, I'm rather new to javascript.
I have a select box which is generated by my organisations CMS. I can't change the drop down's content or how it is generated. What I would like to do however is when the page is loaded, change the default (or "selected") option based on a particular value. The other problem is the default is already set in the select drop down is created in HTML. If I could actually change the way options for the select drop down I could easily create some javascript to set the default selection, unfortunately I can't. I'm completely lost. Any assistance would be greatly appreciated.
Code used:
I unfortunately cannot change this:
<select name="q528696:q1" id="q528696_q1" class="sq-form-field"><option value="0" selected="selected">Address adult language literacy and numeracy | 688</option>*More options here*</select>
This is the javascript used. It's very simple:
<SCRIPT> window.onload=updateSelect();
function updateSelect() {
document.getElementById('q528696:q1').value=25;
};
</SCRIPT>
To change a selected option using JavaScript is very simple. But still, I'll break it down.
Let's start off with a simple drop down list with three options. The select tag will have an id of "change".
<select id="change">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
We want it so that when we press a button "Two" will be the selected option instead of "One". We'll start making our button and making a basic function.
<input type="button" value="Change Selected Option" onclick="changeS()"/>
<script>
function changeS() {
}
</script>
In this function we add the following code
document.getElementById('change').getElementsByTagName('option')[1].selected = true;
Let's take a look at what it's doing.
First, we target the "select" tag with document.getElementById.
Then we get all the elements with a tag name of "option" in the "select" element.
The "[1]" means that we target the second option in the list. The reason we have "1" not "2" is because JavaScript starts counting at "0". If we wanted to target the third option, we would put "[2]".
After that, we just say that we want that specific option in the select tag to be the selected option.I hope it's simple enough and that my explaining was worthwhile :)
I'm answering to this question: How do I change the value of a select element's option? Here's code with comments to help out.
<!--First we'll make a a select element with an option-->
<select>
<option value="Unchanged Value" id="1"></option>
</select>
<!--Now we'll create a button that'll display the value of this option. Refer to the "displayOptionValue" function down below to find out how this is done-->
<input type="button" onclick="displayOptionValue()" value="Display Option Value"/>
<<input type="button" onclick="changeOptionValue()" value="Change Option Value"/>
<!--Here's where the value will display-->
<p id="demo"/>
<script>
//This will get the option's value and display it in the "p" tag
function displayOptionValue() {
var x = document.getElementById("1").value;
document.getElementById("demo").innerHTML = x;
}
//Now we'll change the value
function changeOptionValue() {
document.getElementById("1").value = "Changed Value";
}
</script>
That's what I understand the question to be. If it's not, tell me in the comments and I'll post another answer. Also, if you run the code in your browser, first press "Display Option Value" then "Change Option Value" and then press "Display Option Value" again to see the changes. Once again, if this isn't your question, let me know in the comments.
I'm using tablesorter and the filter widget. I found this jsfiddle example that allows filtering entries with a select box (Filter by age). I want to add that select box to my example, but it doesn't work when simply adding
$(".selectAge").bind('change', function (e) {
var cols=[]
cols[3] = $(this).val()
$('table').trigger('search', [cols]);
});
to my example code. Would you please tell me how to get the select box to work?
My example code is a copy from the official example.
It was working, it just didn't look like it. The one problem with the select is that the "reset" option needed an empty string as a value:
<select class="selectAge tablesorter-filter" data-column="3">
<option class="reset" value="">Filter by age</option>
<option>>=25</option>
<option><=25</option>
</select>
Here is an updated demo (all I changed was the select and added the blue theme css).
Update: Just so you know, in the next update, you can just give that select a "search" class name like the other input, and be sure to include a data-column="#" attribute, and have it work automatically when you use bindSearch, so there would not be a need to add extra code:
$.tablesorter.filter.bindSearch( $('#mytable'), $('.search') );
I have the following code
<select id="part">
<option>noun</option>
<option>verb</option>
<option>adjective</option>
</select>
In the above code, I don't have any value attribute each option tag.
there is only text node.
when I access the option tag
$("#part").val(); I get what is selected in dropdown box. ie, "noun"
but when I access $("#part").text(), there is empty string.
but when I create, option tags dynamically in jquery for
<select id="part"></select>
using
var names=["noun","adjective","verb"];
for (var i =0;i<names.length;i++) {
var option=$("<option>",{
value:names[i],
text:names[i]});
$("#part").append(option);
}
Here the value is attribute is needed to get the option selected.
without value attribute, $("#part") is undefined.
can somebody explain the discrepancy here? of if my understanding is not correct. Thanks
Check here DEMO http://jsfiddle.net/yeyene/yH4Fb/
You need to get only the selected option text coz there are three options,
when you get $("#part").val(); you directly get the selected value (only one selected value). But when you get $("#part").text().. you are getting the text of the whole select text where you have three options and three types of text.
JQUERY
$(document).ready(function(){
var names=["noun","adjective","verb"];
for (var i =0;i<names.length;i++) {
var option=$("<option>",{
value:names[i],
text:names[i]});
$("#part").append(option);
}
$("#part").on('change', function() {
alert('Value is '+$(this).val());
var text = $("#part option:selected").text();
alert('Text is '+text);
});
});
$("#part").text() doesn't return nothing but it won't return what you expect (see this fiddle).
Explanation: text returns the text of the object strips out the html (see jQuery docs examples), so what you will be getting is the inner contents of the select after the html was stripped out.
If you want the text of the selected value, include the selected option in your jquery selector: i.e. $('#part option:selected').text() which uses the jQuery psuedo-selector (also in my fiddle).
I am wondering if someone could help me understand how I can achieve this. I want to show two input boxes only when a certain value in a select box is chosen using javascript (inc jquery).
My select box has this value:
<select name="menu-168" class="wpcf7-validates-as-required">
<option value="Residential">Residential</option>
<option value="Commercial">Commercial</option>
</select>
My input box has this value:
<input type="text" name="text-708" value="" class="wpcf7-validates-as-required" size="40">
In Pseudo code I am after something like this:
<if select name="menu-168" value = "Commerical">
<add css property ".hidden" to input name="text-708">
</if>
My javascript knowledge is so poor, would anyone mind showing me how this is done? This is a JSfiddle with the relevant HTML:
http://jsfiddle.net/K9zGP/
This is using jQuery:
if ($("select[name='menu-168']").val() == "Commercial") {
$("input[name='text-708']").addClass("hidden");
}
On a side note, i would advise you to use class instead of names for referencing HTML elements. Class selection is much faster than attributes.
You can use .on() to attach a listener on the select, to listen for a change event. With the change-event listener you can act whenever someone changes the selected option. Then you can use .toggle() to show/hide the input, depending on what the user has chosen in the select-list.
Something like this:
$(function(){
$("select[name='menu-168']").on("change", function (){
$("input[name='text-708']").toggle($(this).val() !== "Commercial");
});
});
Working example
In this example I use attribute selectors to select your elements, because there is nothing more exact to go on, but you could get slightly better performance by adding ID's to the relevant elements and use those for the selectors instead.
$('#menu-168').on('change', function(){
($this).val() = "Commericial" ?
$('input[name='text-708']').show() : $('input[name='text-708']').hide();
}
})
This things works perfectly
<select name="selectbox" onchange="alert(this.value)">
But I want to select the text. I tried in this way
<select name="selectbox" onchange="alert(this.text)">
It shows undefined.
I found how to use DOM to get text. But I want to do this in this way, I means like using just this.value.
this.options[this.selectedIndex].innerHTML
should provide you with the "displayed" text of the selected item. this.value, like you said, merely provides the value of the value attribute.
In order to get the value of the selected item you can do the following:
this.options[this.selectedIndex].text
Here the different options of the select are accessed, and the SelectedIndex is used to choose the selected one, then its text is being accessed.
Read more about the select DOM here.
Please try this code:
$("#YourSelect>option:selected").html()
Just use
$('#SelectBoxId option:selected').text(); For Getting text as listed
$('#SelectBoxId').val(); For Getting selected Index value
I know no-one is asking for a jQuery solution here, but might be worth mentioning that with jQuery you can just ask for:$('#selectorid').val()
If you want to get the value, you can use this code for a select element with the id="selectBox"
let myValue = document.querySelector("#selectBox").value;
If you want to get the text, you can use this code
var sel = document.getElementById("selectBox");
var text= sel.options[sel.selectedIndex].text;
The question was not for the value but for the text.
Imagine you have something like :
<select name="select">
<option value="1">0.5</option
<option value="2">0.7</option
</select>
And you need to catch the text.
So for me I have tried with html (php), and
this.options[this.selectedIndex].text
(from Delan Azabani) doesn't work but
this.options[selectedIndex].text
work, like this on HTML
<select ... onChange="upTVA(this.options[selectedIndex].text);">
It is still surprising that for a select this.text does not work while this.value works