I know this has been asked before, but this is a slight variation.
I know how to change the selected value of a dropdown using with the selectedIndex or the option value..
$("#colA"+id).prop("selectedIndex", 0);
$("#colA"+id).val("1");
But can it be done for the option TEXT. eg:
<option value='1234'>**Entry 1**</option>
Can we change based on Entry 1 ? The value is dynamic, the text is static.
I can't find anyway to do this especially as I'm using $("#colA"+id)
Resolved using :
var defaultVal = "Event 1";
$("#ColA"+id).each(function () {
$('option', this).each(function () {
if ($.trim($(this).text().toLowerCase()) == $.trim(defaultVal.toLowerCase())) {
$(this).attr('selected', 'selected');
};
});
});
Related
I have 2 selectboxes
<h3>Results</h3>
<select id="register_form" name="sport" />
<option value="Rugby">Rugby</option>
<option value="Cricket">Cricket</option>
<option value="Football">Football</option>
</select>
<?php
echo'<select name="match">';
echo'<option value="'.$row['event_id'].'">'.$row['team1'].' VS '.$row['team2'].'</option>';
echo'</select>';
?>
<input id="register_form" type="submit" value="Display" name="submit" />
User searches for a result by:
selecting sport type in 1st selectbox and then in 2nd selectbox option values are populated based on sport type.
Is it possible to do this in PHP without the user having to first press submit to get the $_POST value of sport type?
What is my best option here?
PHP always need to reload the page to refresh your informations, so, as anant kumar singh said, you need to use AJAX for that. And as yak613 said, jQuery will help you to use AJAX easily
1.Ajax is the only option what you asked for that(without page refresh)
When you use php it's only possible with page refresh. but with ajax without page refresh it's possible.
helping links are:-
Use jQuery to change a second select list based on the first select list option
https://www.daniweb.com/web-development/php/threads/372228/php-and-ajax-auto-populate-select-box
https://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax
You can use this Multiple Select Dropdawn lists: http://coursesweb.net/ajax/multiple-select-dropdown-list-ajax_t , it can be used for multiple sets of Select lists.
I've faced with the same problem in my project. But the needed functionality was higher - not two dependent selectboxes and bigger number. I've written a simple function to load my selectboxes:
//formId - form where selectbox is
//name - attribute "name" of selectbox
//dataSourceUrl - url to PHP-file
//affectingField - string with value that filters the selecbox's data
function loadSelectbox( formId, name, dataSourceUrl, affectingField ){
//console.log('Loading data to selectbox name="'+name+'":');
var selectbox = $('#'+formId+' select[name="'+name+'"]');
if(selectbox){
//console.log("Selecbox found");
if(affectingField != null){
var affectingValue = $('#'+formId+' [name="'+affectingField+'"]').val();
dataSourceUrl += '?affectingValue='+affectingValue;
}
var options = selectbox.find('option');
var jqxhr = $.ajax({
url: dataSourceUrl,
dataType: 'text'
})
.done(function(data) {
//console.log(data);
if(data != ""){
var optionsObject = JSON.parse(data);
var i = 0;
console.log(optionsObject);
var options = [];
$(optionsObject).each(
function(){
options[i] = '<option value="'+$(this)[0]['val']+'">'+$(this)[0]['text']+'</option>';
i++;
}
);
selectbox.html(options);
if(urlParamsSet[name] == false){
setParamFromUrl(name);
}
}
else{
selectbox.html('<option value="">Все</option>');
}
})
.fail(function() {
alert("Problems with server answer");
})
selectbox.prop("disabled", false);
}
else{
console.log("No selectbox with such name");
}
}
Not saying that this code is perfect, but it works. PHP-file must return the values to selecbox in JSON format (convert from with structure: array(index, value, text) ).
I have a table displaying results, I want to give people the ability to update the results of a cell/field individually without needing a whole update form
Here is what I have:
echo "<select name='tv_taken' id='tv_taken' onchange='window.location=\"samepage.php?update=tv_taken&update_id=$tv_id\" '>";
As you can probably tell its a select box with a list of users. Now the only problem is i need to pass the new selected value in the url string, so i want the new value of the select.
So lets say it was mary and someone chooses a new user John I want something like this
echo "<select name='tv_taken' id='tv_taken' onchange='window.location=\"samepage.php?update=tv_taken&update_id=$tv_id&user_name=$find_username\" '>";
What I'm not sure on is there a way to pass the changed value via php or will I need a javascript solution?
Ill then use an
IF if(isset($_GET['tv_id']))
{
Do the update
}
This is not a public site so I'm guessing there is a more secure way to do this but this should probably suffice since it will only be team members using it who would be required to login before they can see this page.
You'll want to use JavaScript to achieve this.
Here's a jQuery solution:
$('#tv_taken').change(function() {
window.location = "samepage.php?update=tv_taken&update_id=" + $(this).val();
});
And here's a vanilla JavaScript solution:
document.getElementById('tv_taken').onchange = function() {
window.location = "samepage.php?update=tv_taken&update_id=" + this.value;
};
window.addEventListener('load', function(){
var select = document.getElementById('tv_taken');
select.addEventListener('change', function(){
window.location = 'pagename.php?tv_id=' + this.value;
}, false);
}, false);
I've looked through stackoverflow for an answer and am almost there but need some help.
I have multiple drop down lists with the same options in them. For example three identical lists with the following:
<label for='distlist_1'>Distribution List 1</label>
<select name='distlist_1'>
<option value=''>Please Select:</option>
<option value='1'>All</option>
<option value='2'>All Managers</option>
<option value='3'>Leavers</option>
</select>
The only difference being the name eg, distlist_1, 2, 3 etc. I can add ids if necessary.
When a user selects an option in the first drop down list I need it to be removed from all other drops downs. I found a script that did this.
$('option').click(function(){
$('option:contains(' + $(this).html() +')').not(this).remove();
});
But I need it so that if the user then decides, 'wait I don't need that option in drop down list 1 after all', she picks something else and the option reappears in the other drop downs. The code above removes the options then there is no way of retrieving them until if you click enough they all disappear.
This actually does what you want... This is based on jquery 1.7 and the on() event binder
$(document).ready(function (){
$('select').on('focus', function() {
// on focus save the current selected element so you
// can place it back with all the other dropdowns
var current_value = $(this).val();
// bind the change event, with removes and adds elements
// to the dropdown lists
$(this).one('change.tmp', { v : current_value }, function(e)
{
if ($(this).val() != '')
{ // do not remove the Please select options
$('option[value="' + $(this).val() + '"]')
.not($('option[value="' + $(this).val() + '"]', $(this)))
.remove();
}
if (e.data.v != '')
{ // do not add the Please select options
$('select').not($(this)).append($('option[value="' + e.data.v + '"]', $(this)).clone());
}
});
// on blur remove all the eventhandlers again, this is needed
// else you don't know what the previously selected item was.
$(this).on('blur.tmp', { v : current_value}, function (e)
{
$(this).off('blur.tmp');
$(this).off('change.tmp');
});
});
});
The only thing it doesn't do is ordering everything in the right order. You will have to think of your own way of doing that at the .append function.
I ended up using this as it was concise...
jQuery(document).ready(function() {
var selects = $('.mapping')
selects.change(function() {
var vals = {};
selects.each(function() {
vals[this.value] = true;
}).get();
selects.not(this).children().not(':selected').not(':first-child').each(function() {
this.disabled = vals[this.value];
});
});
});
I have a form on my page with a dropdown of counties. I want to somehow, with jQuery or PHP say that if a certain county is selected then redirect otherwise process the form.
I've created a fiddle to try and explain...
http://jsfiddle.net/KVjAc/
Just submit the form and use a php header command for the values you want to redirect. That would be the first thing to check in the form processor script.
No need for javascript unless you are using ajax to refresh parts of the page based on the selection.
I hope this helps(if you need a javascript/jquery solution),
$('#selectbox_ID').change( function() {
if($(this).val() == "your country"){
}
});
Do something like:
$(document).ready(function () {
$('#county').on('change', function () {
var value = $(this).val();
if (value == 'cheshire' || value == 'city of london' || value == 'durham') {
window.location.href = 'http://www.google.com/';
}
})
});
EDIT: Also, you need to add values to your option elements: <option value="cheshire">Cheshire</option>
Hi guys i using this jquery to show a div when i select a option
$("#select1").change(function(){
if ($(this).val() == "2" ) {
$("#hide1").fadeIn("fast");
} else {
$("#hide1").fadeOut("fast");
}
});
});
But i have a problem when i load the page get results from database, the option on select return SELECTED and the div only shows if i change the option..
can samebody help what i neeed to do to solve this?
explain again: get the val() from select and show the div without change the option... sorry for my english..
thanks
You can trigger the change after you bind it.
$('#select1').change( function(){
// your change code
if ($(this).val() == "2" ) {
$("#hide1").fadeIn("fast");
} else {
$("#hide1").fadeOut("fast");
}
}).change();
When the page loads (and after you bind the onchange function to your form elements) you should trigger any of these functions:
$(document).ready(function(){
$("#select1").trigger('change');
});
This way it will act as if the user selected it even if the value was loaded from the database.
EDIT: czarchaic's answer is also very good, as chaining the event trigger to the event binding is more compact and it may be easier to read the code, and in this instance is probably the better solution. The answer I provided will work fine as well, and while it's longer, it as the small advantage that it will also work in cases where the function was not bound by jquery (i.e. when the event is explicitly declared in the HTML):
<select id=""select1" onchange="if ($(this).val() == '2' ) {
$('#hide1').fadeIn('fast');
} else {
$('#hide1').fadeOut('fast');
}
">
<option...
You can do something like this. Triggering the change event after binding it.
$("#select1").change(function(){
if ($(this).val() == "2" ) {
$("#hide1").fadeIn("fast");
} else {
$("#hide1").fadeOut("fast");
}
}).change();