I've created a very basic form that has 2 dropdown lists.
Each list contains the same entries:
<option value='1234:0'>Closed</option>
<option value='4567:2'>Open</option>
<option value='6857:1'>Dead</option>
<option value='9856:1'>Alive</option>
<option value='0000:0'>Other</option>
If an entry in dropdown 1 is selected, then that entry should be removed from dropdown 2
If a different entry is selected in dropdown 1, then that should be removed from dropdown 2 and the original entry returned to dropdown 2
if nothing is selected in dropdown 1, then all options should be shown in dropdown 2.
I've created a FIDDLE, showing how far I've got... it's not very far.
Can any one help with this ?
Thanks
Try this
$(function(){
$('#test').change(function () {
var selected = $(this).val();
$("#test2 option").show();
$("#test2 option[value='" + selected + "']").hide();
});
});
If you want to use text you can try this
$(function(){
$('#test').change(function () {
var selected = $('option:selected', this).text();
$("#test2 option").each(function(){
if($(this).text() == selected) {
$(this).hide();
} else {
$(this).show();
}
})
});
});
Since the value of each the options are identical, you can use value attribute to select the match in second select.
$('form').on('change', 'select[name="test"]', function() {
var selected = $(this).val();
$("#test2 option").show();
$("#test2 option[value='" + selected + "']").hide();
});
Demo
Related
Here are the two select boxes. I am trying to get the value of C to pass on in a form. Select box C is populated from the ajax call below but I can't seem to get a useable value to pass on to the form. (In its simplest form I am looking for something like var A= 'select box C') then I can send 'A' in the form:
Many thanks in advance people x
<select name="list-select" id="list-select">
<option value="">Please select..</option>
<option value="Chemical">Chemical</option>
<option value="Hardware">Hardware</option>
</select>
<select name="C" id="C"></select>
Here is the jquery bit:
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function ($) {
var list_target_id = 'C'; //first select list ID
var list_select_id = 'list-select'; //second select list ID
var initial_target_html = '<option value="">Please select a colour...</option>'; //Initial prompt for target select
$('#' + list_target_id).html(initial_target_html); //Give the target select the prompt option
$('#' + list_select_id).change(function (e) {
//Grab the chosen value on first select list change
var selectvalue = $(this).val();
//Display 'loading' status in the target select list
$('#' + list_target_id).html('<option value="">Loading...</option>');
if (selectvalue == "") {
//Display initial prompt in target select if blank value selected
$('#' + list_target_id).html(initial_target_html);
} else {
//Make AJAX request, using the selected value as the GET
$.ajax({
url: 'http://www.mypropertyviewing.com/Client_order_form_v1.1/selector.php?svalue=' + selectvalue,
success: function (output) {
$('#' + list_target_id).html(output);
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status + " " + thrownError);
}
});
}
});
});
</script>
use
selectvalue=this.value //instead of
selectvalue =$(this).val();
Am using the following code to perform a livesearch via a SQL query. The Jquery code is shown below:
$(document).ready(function() {
$('#holdername').on('keydown', function() {
var searchKeyword = $(this).val();
if (searchKeyword.length >= 3) {
$.post('holdersearch.php', { keywords: searchKeyword }, function(data) {
$('ul#liveSearchList').empty()
$.each(data, function() {
$('ul#liveSearchList').append('<span class="searchResultItem">' + this.holder + '</span></br>');
});
}, "json").fail($('ul#liveSearchList').empty());
} else {
$('ul#liveSearchList').empty()
};
});
$('#liveSearchList').on('click', function() {
var holderName = $(this).find("a").html();
console.log("Holder: ",holderName);
$('#holdername').val(holderName);
$('ul#liveSearchList').empty()
});
});
This creates the list as it should however when any item in the list is selected (clicked) it will only ever populate the input box with the first item in the list. Am not sure why it is doing this, if I hover down the list the link shows the different values for hldr as it should so it appears it is working as it should. The console.log confirms the item selected is only ever the first on the list
You added click event on whole ul, so $(this).find("a").html(); select all <a> elements and return value of first
You should add click event to all <li> or <a> elements. Try this:
$('#liveSearchList').on('click', 'li', function() {
var holderName = $(this).find("a").html();
console.log("Holder: ",holderName);
$('#holdername').val(holderName);
$('ul#liveSearchList').empty()
});
Is there a chance to have a combobox, which every time I select something in there, it opens a new one, etc, until no more data to select?
(options must not be repeated)
Combo1 - (opt1-opt2-opt3) - selected opt1
Combo2 - (opt2-opt3) - selected opt3
Combo3 - (opt2)
Comboboxes should be populated by querys using php and mysql.
How can I do it ?
Cheers!
Here is some jquery that will do this:
HTML
<select id="combo1" class="combo" data-index="1">
<option></option>
<option val="Opt1">Opt1</option>
<option val="Opt2">Opt2</option>
<option val="Opt3">Opt3</option>
</select>
Javascript
$('body').on('change', '.combo', function() {
var selectedValue = $(this).val();
if ($(this).find('option').size() > 2) {
var newComboBox = $(this).clone();
var thisComboBoxIndex = parseInt($(this).attr('data-index'), 10);
var newComboBoxIndex = thisComboBoxIndex + 1;
$('.parentCombo' + thisComboBoxIndex).remove();
if (selectedValue !== '') {
newComboBox.attr('data-index', newComboBoxIndex);
newComboBox.attr('id', 'combo' + newComboBoxIndex);
newComboBox.addClass('parentCombo' + thisComboBoxIndex);
newComboBox.find('option[val="' + selectedValue + '"]').remove();
$('body').append(newComboBox);
}
}
});
Demo
Explanation
// Adds an event listener to each combo box that is created dynmically
$('body').on('change', '.combo', function() {
// Gets this selected value
var selectedValue = $(this).val();
// Checks if there are enough options left to create another combo box
if (selectedValue !== '' && $(this).find('option').size() > 2) {
// Clones the just selected combo box and get the current and next combo index
var newComboBox = $(this).clone();
var thisComboBoxIndex = parseInt($(this).attr('data-index'), 10);
var newComboBoxIndex = thisComboBoxIndex + 1;
// Removes any "children" combo boxes
$('.parentCombo' + thisComboBoxIndex).remove();
// Checks if a blank value is not selected to create another combo box
if (selectedValue !== '' && $(this).find('option').size() > 2) {
// Gives this new combo box the correct id, index, parent class
newComboBox.attr('data-index', newComboBoxIndex);
newComboBox.attr('id', 'combo' + newComboBoxIndex);
newComboBox.addClass('parentCombo' + thisComboBoxIndex);
// Removes the selected option from the new combo box
newComboBox.find('option[val="' + selectedValue + '"]').remove();
// Adds the combo box to the page. Disco!
$('body').append(newComboBox);
}
}
});
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];
});
});
});
Hi guys i have a combobox with jquery - but i cant make the second one populated when the first select coming selected alredy. im try to get the value without change the select.
<form>
<select name="tipo" id="Tipo_Id" class="buscaTiposVeiculos">
<option value="1" selected="selected">teste1</option>
<option value="2">teste2</option>
<option value="3">teste3</option>
<option value="4">teste4</option>
</select>
<select name="marca" class="recebeMarcas">
<option value="">--- Select ---</option>
</select>
</form>
jquery
$('select.buscaTiposVeiculos').change(function () {
$("select.recebeMarcas").html('<option value="">Carregando...</option>');
// var opt = $("select.buscaTiposVeiculos"); tried like this
// var val = $(this).val(); tried like this
// var val = $(this).find('option:selected').val(); not works
$('select.recebeMarcas >option').remove();
$.post('/inc/geraCidades.php', {
tipov: $(this).val(),
tipo: "tipo"
}, function (data) {
$('select.recebeMarcas').html('<option value="">Selecione a Marca</option>' + data);
});
});
your selected value is
$("#Tipo_Id option:selected").val();
To trigger change event on page load and populate second select automatically. Some commented code can be removed
/* create the change handler use ID is better selector for efficiancy*/
$('#Tipo_Id').change(function() {
/* this populates second select with one option*/
$("select.recebeMarcas").html('<option value="">Carregando...</option>');
/* this removes option populated in line above*/
$('select.recebeMarcas >option').remove();
$.post('/inc/geraCidades.php', {tipov: $(this).val(), tipo : "tipo"}, function(data) {
$('select.recebeMarcas').html('<option value="">Selecione a Marca</option>'+data);
});
/* trigger the change event on page load*/
}).change();