I have the next selectbox in HTML:
<select id="listbox-taskStatus" class="selectpicker">
<option status="0">In progress</option>
<option status="1">Not started</option>
<option status="2">Done</option>
<option status="3">Failed</option>
</select>
I want to read the attribute value from selected option.
If just to take the value, it's simple:
var value = $('#listbox-taskStatus').val();
But what should I do, if I want to get the attribute value from selected option?
I know, that .attr() must help, but when I tried to use it I've got the incorrect result.
I've tried the next:
var status = $('#listbox-taskStatus option').attr('status');
But the returned value is always 0 despite on fact I was selecting different option.
What's wrong, how to solve my problem?
Use :selected Selector
var status = $('#listbox-taskStatus option:selected').attr('status');
However, I would recommend you to use data- prefixed attribute. Then you can use .data()
var status = $('#listbox-taskStatus option:selected').data('status');
DEMO
var optionAttr1 = $('#listbox-taskStatus').find('option:selected').attr("status");
var optionAttr = $('#listbox-taskStatus option:selected').attr("status");
Related
In html I have a file input element within a form:
<input type="file" id="file-select" name="photos" />
Then in javascript I append this to my formData object (formData) as follows:
formData.append('photos', file, file.name);
Then finally in php I retrieve the transferred file.
$fileName = $_FILES['photos']['name'];
This works great.
However I also have a dropdown list in the same form in HTML:
<label>Select Year to Load File to:</label>
<SELECT name = "year_list">
<OPTION Value="2013">2013</OPTION>
<OPTION Value="2014">2014</OPTION>
<OPTION Value="2015">2015</OPTION>
<OPTION Value="2016">2016</OPTION>
</SELECT>
However it is not clear to me what the syntax I need to use to append the users selection to formData and also to retrieve the result in php. Can someone enlighten me as to how to do this?
I Do not want to use jquery.
I understand for the append statement I should use the syntax:
append(DOMString name, DOMString value);
But then what DOMString name and DOMString value would I use? And what would I use in $_POST in the php file?
Many thanks.
Thanks folks. After a bit of sleep and some further experimentation I got it to work as follows:
In javascript declared variables to get the values from the dropdown list and appended those values to the formData object as follows:
var sel_month_list = document.getElementById("month_list");
var month_list = sel_month_list.value;
var sel_year_list = document.getElementById("year_list");
var year_list = sel_year_list.value;
formData.append('month_list', month_list);
formData.append('year_list', year_list);
Then in php the following successfully retrieved the values:
$month = $_POST['month_list'];
$year = $_POST['year_list'];
Seems a little cumbersome but it worked. Feel free to pitch in if there is a more elegant way to achieve this.
Regards
I need to load the content of a PHP file using jquery based on what is selected by the user in one or more select fields.
I can use...
$("#first-choice").change(function() {
$("#second-choice").load("getter.php?choice=" + $("#first-choice").val() );
});
...to create the variable 'choice' and when the 'first-choice' field is set by the user.
However, what if I want to use 2 variables based on two drop down selectors, to set the variable 'choice' (based on the selection of #first-choice) and choice2 (based on the selection of #second-choice).
So I would want to load a PHP file something like getter.php?choice=first-choice&choice2=second-choice
here's how i would handle this situation..
don't treat your selects as ids. use a single class for all select options, then bind .change() to all selects using a class-based selector. if you do this, you can iterate over X number of selects, use their ids as the query argument variable and their values as each query value. I created a quick demo for you on jsfiddle. I also posted the code for you below....
Here is my demo on jsfiddle
<div>
<select class="php-options" id='first-choice' name='first-choice'>
<option value='1-0'>choose</option>
<option value='1-1'>1-1</option>
<option value='1-2'>1-2</option>
<option value='1-3'>1-3</option>
<option value='1-4'>1-4</option>
<option value='1-5'>1-5</option>
</select>
</div>
<div>
<select class="php-options" id='second-choice' name='second-choice'>
<option value='2-0'>choose</option>
<option value='2-1'>2-1</option>
<option value='2-2'>2-2</option>
<option value='2-3'>2-3</option>
<option value='2-4'>2-4</option>
<option value='2-5'>2-5</option>
</select>
</div>
<div id="request-url"></div>
$(document).ready(function(){
//treat your select options with classes,
//bind change event on each select
$('.php-options').change(function(e){
var urlValues = [],
parameterArgs = "";
//loop selects to build parameters
$('.php-options').each(function(i,v){
var optValue = $(this).val(),
optId=$(this).attr('id'),
parameter = ""+optId+"="+optValue;
urlValues.push(parameter);
});
//build parameter string
parameterArgs =urlValues.join("&");
//output query
$('#request-url').text('getter.php?'+parameterArgs);
});
});
I am dynamically generating a dropdown list on the page when a user loads it. I'd like to get the value of the dropdown using jquery or javascript.
The tricky part is that the dropdown will have a value as such:
"I love Rabbits ($19.95)"
I want to get the value of the dropdown and then isolate the value inside of the brackets.
Any ideas?
Cheers!
Getting the value is easy, use val(). That will be a string.
Then you just grab the value with a regex, probably with a capture group; for instance:
var value, m, innerValue;
value = $("selector for select box").val();
m = /\(([^)]+)/.exec(value);
if (m) {
innerValue = m[1];
}
That regex says: "Find a ( and then capture everything following it that isn't a )". Then we take the value of the capture group.
Could you not have your select in the following format:
<select name="opinions_price">
<option value="19.45">I love rabbits (£19.45)</option>
<option value="12.45">I hate parakeets (£12.45)</option>
<option value="3.24">I am indifferent to possums (£3.24)</option>
</select>
Then simply do:
var price = $('select option:selected').val();
If you want to use the data attributes instead (assume the select is in a loop, you know how to do that):
<select name="opinions_price">
<?php foreach($things as $thing) { ?>
<option data-price="<?php echo $thing['price']; ?>" data-id="<?php echo $thing['id']; ?>">[..]</option>
<?php } ?>
</select>
Then simply do:
var price = $('select option:selected').data('price');
var id = $('select option:selected').data('id');
Saves a (possibly) expensive Regex?
How can I get the text within the selected dropdown menu option using jQuery?
I have tried:
var title = $("#selectattribute option:selected").text();
But I don;t think it works..
What you did should work:
$("select option:selected").text()
Working example
Since it's not working for you, the error must lie somewhere else. Maybe #selectattribute is incorrect.
To clarify some of the other answers, the value of an option is different from the text inside it.
For example:
<select>
<option value="red" selected="selected">Ferrari</option>
</select>
// For the above HTML
$("select option:selected").text() === 'Ferrari'
$("select option:selected").val() === 'red'
Also, if no selected attribute is set in the HTML, the first option will be selected:
<select>
<option value="black">Porsche</option>
<option value="red" >Ferrari</option>
</select>
// For the above HTML
$("select option:selected").text() === 'Porsche'
You can get the value of the select box by simply using:
var title = $("#selectattribute").val();
To get the text of the option, instead of the value attribute:
var title = $("#selectattribute :selected").text();
Does anybody know why I cannot specify the default value this way when it is pulling values from MySQL? I am ultimately trying to have it repopulate the dropdown lists with the appropriate $_REQUEST fields, so that editing can be easier.
$(document).ready(function(){
$("#region").load('getRecords.php?start=regions');
}); //jQuery initializations
...............
<select
class = "region"
name = "region"
onchange = "value = this.value;
$('.country').load('getRecords.php?region='+value)
">
<option>.....Reading database.....</option>
</select>
<script>$('.region').val('Africa');</script>
...............
This is the kind of info that gets placed
<option value = "">Select One Region-------</option>
<option value="Africa">Africa</option>
<option value="Americas">Americas</option>
<option value="Asia">Asia</option>
<option value="Australasia">Australasia</option>
<option value="Europe">Europe</option>
<option value = "">------or a Sub-Region------</option>
<option value="Alps">Alps</option>
<option value="Amazon">Amazon</option>
//ETC>>>>
I can only get the jQuery .val method to work for very simple setups.
Not quite sure what you are aiming for but maybe something like this will give you a nudge in the right direction (taken from the top of my head), probably has syntax errors.
$("select.region option[selected]").removeAttr("selected");
$("select.region option[value='Africa']").attr("selected", "selected");
try this:
document.getElementById("region").selectedIndex=0;//put index of the element which you want as default
and give id="region" in select tag
You need to have a valid <option value="Africa"> first before you can make that value become the default. <select> tags do not have arbitrary value attributes.
I recommend like below:
$('#region option[value="' + response_var[0].columnname + '"]').prop('selected', true);