Noob here trying to do something simple with Jquery. Basically I have a small select-option dropdown like this:
<select onchange="javascript:swapContent('con3');">
<option>selection 1</option>
<option>selection 2</option>
<option>selection 3</option>
</select>
Currently it is posted via ajax to a $php variable here:
$contentVar = $_POST['contentVar'];
javascript function is here:
<script language="JavaScript" type="text/javascript">
function swapContent(cv) {
$("#myDiv").html('<img src="loader.gif"/>').show();
var url = "myphpscript.php";
$.post(url, {contentVar: cv} ,function(data) {
$("#myDiv").html(data).show();
});
}
</script>
How can I instead post the value of the select-option dropdown?
I realize this is basic, but I have to start somewhere and cannot find a tutorial that shows me how to do what I need. Thank you for your help.
How can I instead post the value of the select-option dropdown?
If you want to send values yo tour script you should start by giving values to your option elements (and an id to your <select> element to be able to use it and retrieve the selected value):
<select onchange="javascript:swapContent('con3');" id="myselect">
<option value="value1">selection 1</option>
<option value="value2">selection 2</option>
<option value="value3">selection 3</option>
</select>
and then:
// get the currently selected value from the dropdown
var value = $('#myselect').val();
$.post(url, { contentVar: cv, selectedValue: value }, function(data) {
$("#myDiv").html(data).show();
});
If on the other hand you wanted to send the text of the selected option you could use this:
// get the currently selected value from the dropdown
var text = $('#myselect option:selected').text();
$.post(url, { contentVar: cv, selectedText: text }, function(data) {
$("#myDiv").html(data).show();
});
Now inside your PHP script you could fetch the value:
$_POST['selectedValue']
HTML:
Remove the inline javascript change event from the select.
<select>
<option>selection 1</option>
<option>selection 2</option>
<option>selection 3</option>
</select>
jQuery:
Bind a change event to your select. Inside this event, this.value with be the value of the select.
$(document).on("change", "select", function(){
$("#myDiv").html('<img src="loader.gif"/>').show();
var url = "myphpscript.php";
$.post(url, {contentVar: this.value} ,function(data) {
$("#myDiv").html(data).show();
});
});
var val = $('select option:selected').text();
Using jQuery's selector syntax, you first select the "select" control, and then the "option" child of the select control. You then look for the selected state. Finally, return the text.
Of course, as is, this code will select every "select" control on the page. It would be better to give your select control an id:
<select id="mySelect">
<option>Some option</option>
<option>Some other option</option>
</select>
Then the code becomes
var val = $('#mySelect option:selected').text()
You might want to consider an unobtrusive JavaScript approach and not have the on-change event in your html mark-up, instead attach an event handler as shown below, from the jQuery API site
<!DOCTYPE html>
<html>
<head>
<style>div { color:red; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<select name="sweets">
<option>Chocolate</option>
<option>Candy</option>
<option>Taffy</option>
<option>Fudge</option>
<option>Cookie</option>
</select>
<div></div>
<script>
$("select").change(function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
$("div").text(str);
})
.change();
</script>
</body>
</html>
Related
Need assistance
I need to have a select function where as
<select class="form-control">
<option value="4100">4100 : Mass Collections</option>
<option value="4200">4200 : Stole Fees</option>
<select>
now I don't want to include the code description after selecting an option, it should be code only appearing on the select box like this.
I have tried this Jquery script
$('select').change(function() {
var code= $('option:selected',this).text().split(' : ');
$('option:contains('+code[0]+')',this).val(code[0]);
})
but every time I do this checking in dropdown the option omitted the description entirely. How do I prevent this.
thanks in advance
You can follow the idea of this answer: add the description only when the element have focus:
$('select').on("focus", function(s) {
for (var o of this.options) {
o.textContent = o.getAttribute('value') + ': ' + o.dataset.descr;
}
});
$('select').on("blur", function(s) {
for (var o of this.options) {
o.textContent = o.getAttribute('value');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control">
<option value="4100" data-descr="Mass Collections">4100</option>
<option value="4200" data-descr="Stole Fees">4200</option>
<select>
This is the best that I could do.
$(document).ready(function (){
$('select').change(function(s) {
for (var option of this.options) {
option.label = option.text;
};
this.selectedOptions[0].label = this.selectedOptions[0].value;
});
});
Better to check it with more options,
<select class="form-control">
<option value="4100">4100 : Mass Collections</option>
<option value="4200">4200 : Stole Fees</option>
<option value="4300">4300 : Something Else</option>
<select>
select id section
script section in head
So this is the situation.
I have this
<select name="users" onchange="showUser(this.value)" id="1">
<option value="">Select a person:</option>
<option value="'.$lectures[4][0].'">'.$lectures[4][0].'</option>
<option value="'.$lectures[5][0].'">'.$lectures[5][0].'</option>
<option value="'.$lectures[6][0].'">'.$lectures[6][0].'</option>
<option value="'.$lectures[7][0].'">'.$lectures[7][0].'</option>
</select>
Like this I have lots of select element in the page. I want to pass two value through ajax.
One is selected option value. Which I have done successfully.
Other is the I want to pass select tag id. In this case it is 1.
So Could you help me in the ajax part
xmlhttp.open("GET","optiondetails.php?q="+str,true);
xmlhttp.send();
How to pass this value through ajax. Please keep in mind that I have to do this for many select tag. So I cannot pass them directly by value.
Thanks for you help.
try this:
$(document).ready(function(){
$('select').change(function(){
var opt = $(this).find('option:selected');
console.log(opt.val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="1">
<option value="dog">dog</option>
<option value="cat">cat</option>
</select>
<select id="2">
<option value="chocolate">chocolate</option>
<option value="pizza">pizza</option>
</select>
I used jQuery selector to get the selected option inside the changed select element
I think this is more convenient way to do that:
$(document).ready(function(){
$(document).on('change', 'select', function(){
var optVal = $(this).val();
var id = $(this).attr('id');
$.ajax({
method: "GET",
url: "optiondetails.php",
data: {q:optval, tag_id:id},
cache: false
}).done(function(response){
console.log(response);
});
});
});
I have specified attribute to tag that I want to fetch using jquery.
<select id='duration' name='duration'>
<option value=''>Select Duration</option>
<option value='10' data-cost='50'>10 Min</option>
</select>
Here is my jquery code.
$(document).ready(function(){
$('#duration').change(function(){
var cst=$(this).data('cost'); // not working
var cst=$('#duration').data('cost');
alert(cst);
});
});
It is showing value undefined in alert.
I'm I doing anything wrong ?
data is attribute of option tag not select tag this represent select tag
Try this JSFIDDLE
$(document).ready(function(){
$('#duration').change(function(){
var cst=$(":selected",this).data('cost'); // not working
alert(cst);
});
});
I have this script and I want to get the value of drop down select list in the PHP and check the if (jws1 != "") then show 1 to 10 value in the second drop down box using of for loop...
JavaScript code:
<script language="javascript" type="text/javascript">
function test()
{
var e = document.getElementById("JWSections");
var Sections = e.options[e.selectedIndex].value;
alert(Sections);
}
</script>
HTML code:
<select name="JWSections" id="JWSections" onchange="test();">
<option value="">Select Sections</option>
<option value="jws1">Section 1.1</option>
<option value="jws2">Section 1.2</option>
<option value="jws3">Section 1.3</option>
<option value="jws4">Section 1.4</option>
</select>
I want to get the value like jws1, and check in the PHP.
For PHP to be able to do anything with your HTML form data, you'll have to submit it to PHP.
You can either submit the form itself or use AJAX to pass in the value of jws1 and build the options from the result. Jquery is pretty good with doing that kind of thing, all you gotta do is set your AJAX request's data type to HTML and assign the data from the "success" callback to your destination drop down list.
<select name="JWSections" id="JWSections" onchange="test(this);">
<option value="">Select Sections</option>
<option value="jws1">Section 1.1</option>
<option value="jws2">Section 1.2</option>
<option value="jws3">Section 1.3</option>
<option value="jws4">Section 1.4</option>
</select>
<select name="JWSections" id="secondDropDown"> </select>
<script language="javascript" type="text/javascript">
function test(dropdown)
{
var selectedjws = dropdown.options[dropdown.selectedIndex].value;
var secondDropDown = document.getElementById('secondDropDown');
$.post('path', { selectedjws : selectedjws }, function(key, value){
// Remove all options from second dropdown
for(var i = 0; i < secondDropDown.options.length; i++){
secondDropDown.remove(i);
}
// Add options by key value pair returned from server
secondDropDown.add(new Option(value, key))
});
}
</script>
jsfiddle: http://jsfiddle.net/KTq6y/1/
I need to select a specific item of a combobox in my page when i click in a button.
I am using php and javascript code in my page.
Actually i am calling a javascript function at the "onclick" of the button. But i still dont get the right command to do this.
example:
<select id="TEST">
<option> a</option>
<option> b</option>
<option> c</option>
</select>
i want to show the item b when i click in the button.
<select id="select1">
...
</select>
<button onclick="chooseItem('select1', 1)">
<script type="text/javascript">
function chooseItem(id, index){
var selectElement = document.getElementById(id);
selectElement.selectedIndex = index;
}
</script>
or with jQuery:
<select id="select1">
...
</select>
<button id="button1">
<script type="text/javascript">
$(document).ready(function(){
$("#button1").click(function(e){
$("#select1").each(function(){
this.selectedIndex = 1;
});
});
});
});
use selectedIndex property.