Jquery change the value of dropdown from a dropdown change - javascript

I'm trying to change the value of two dropdown lists when a third one changes, to that dropdown's new value:
<script>
$('select[name="d1"]').change(function() {
$('select[name="d2"]').val(this.value);
$('select[name="d3"]').val(this.value);
});
</script>
Nothing happens.

Try this for starters, work your way when you get this to work :)
$(document).ready(function() {
$('select[name="d1"]').change(function() {
$('select[name="d2"]').val(this.value);
$('select[name="d3"]').val(this.value);
});
});

Try like this
$(function() {
$('select[name="d1"]').change(function() {
$('select[name="d2"]').val($(this).val());
$('select[name="d2"]').html($(this).val());
});
});

Related

javascript, div buttons with if else

$(document).ready(function() {
$('#b1').click(function() {
$('#uch').toggle("slow");
});
$('#b2').click(function() {
$('#uch2').toggle("slow");
})
})
I'm not a programmer but somehow managed to make div buttons that opens another div when clicked but I cant manage how to make so that when I click on one button that opens div and then when I click on other button it opens div and hides previous div. I want to integrate it later to joomla template, but as I use jquery and all efforts with if not working maybe someone is clever then me. thanks in advance. I place here working fiddle too.
fiddle example of my buttons
affter some usefull answers i reedited my code and managed to simplify it and added third button , now with extra css class everything seems pretty good but when i click already opened div it reappears as if looping.
edited fiddle
$(document).ready(function() {
$('#b1').click(function() {
$('.bats').hide("slow");
$('#uch').toggle("slow");
});
$('#b2').click(function() {
$('.bats').hide("slow");
$('#uch2').toggle("slow");
});
$('#b3').click(function() {
$('.bats').hide("slow");
$('#uch3').toggle("slow");
});
})
You can call hide('slow') on the other uch element on click of the button. Try this:
$('#b1').click(function() {
$('#uch').toggle("slow");
$('#uch2').hide("slow");
});
$('#b2').click(function() {
$('#uch').hide("slow");
$('#uch2').toggle("slow");
});
Working example
Change ID To Class
$(document).ready(function() {
$('.b1').click(function() {
$('.uch').hide();
$(this).find('.uch').toggle("slow");
});
});
https://jsfiddle.net/u28f6yeL/5/
Here is a working solution for your problem:
change your JQuery code like this:
$(document).ready(function() {
$('#b1').click(function() {
if($('#uch2').css('display') != 'none'){
$('#uch2').toggle("slow");
};
$('#uch').toggle("slow");
});
$('#b2').click(function() {
if($('#uch').css('display') != 'none'){
$('#uch').toggle("slow");
};
$('#uch2').toggle("slow");
});
});
Here's a JSFiddle
you can write a function which close the one is opend! than call them in your click-funktions before toggle the other.

Moving elements from a list to another list with JQuery

I would like to add an element to another list and remove it from the current when clicked. I tried it with the property appendTo of Selectable, but nothing happens when I click on it.
I built this https://jsfiddle.net/wgaga8uc/ to ilustrate it.
$("#paramselectable").selectable({appendTo: "#paramselected"});
$("#paramselected").selectable({appendTo: "#paramselectable"});
I would appreciate any help,
Thanks.
$("#paramselected li").click(function(){
$("#paramselectable").append(document.createTextNode( "Hello" ));
});
Finally I achieved it adding and removing classes. https://jsfiddle.net/22d7sxvd/
$(function() {
$( ".paramsnav" ).selectable();
});
$('li').click(function () {
var selected = $('#params').find('.ui-selected');
if(selected.hasClass('selectable')) {
selected.removeClass('ui-selected');
selected.removeClass('selectable');
selected.addClass('selected');
selected.appendTo('#paramselected');
} else {
selected.removeClass('ui-selected');
selected.removeClass('selected');
selected.addClass('selectable');
selected.appendTo('#paramselectable');
}
});

Clicking to see the dropdown menus

<script>
$(document).ready(function() {
$("#services").click( function() {
$(".subMenus").fadeToggle("slow")
});
});
</script>
This is my code. I can hide and show the dropdown(subMenus) with this code. I want to show the dropdown in my first click which it works but I want to go to a link when I clicked to services for the second time. How can I do?
There is a perfect way for you
$("#services").one('click', function() {
$(".subMenus").fadeToggle("slow")
});
You can do this be checking the visibility of your element. When it's not visible show it, when it is move to your link:
$("#services").click( function() {
if($(".subMenus").is(":visible"))
window.location = "yourLinkHere";
else
$(".subMenus").fadeToggle("slow");
});

Trigger change function and set the value of select in jquery?

Hi I am having given code
$('#filled-in-box2').on('click', function () {
if ($('#filled-in-box2').is(':checked')) {
$('select#employee_permanent_address_attributes_country').val($('select#employee_contact_attributes_country').val()).change();
$('select#permanent_address_state_code').val($('select#contact_state_code').val());
}
});
So I want after change function or when change function trigger at that time only permanent_address_state_code value will set same as contact_state_code value.
I have tried this code too but its not working
$('#filled-in-box2').on('click', function () {
if ($('#filled-in-box2').is(':checked')) {
$('select#employee_permanent_address_attributes_country').val($('select#employee_contact_attributes_country').val()).trigger('change',function(){
$('select#permanent_address_state_code').val($('select#contact_state_code').val());
});
}
});
I am attachiing snapshot when click on check box it does not populate state
Please guide me how to solve this. Thanks in advance.
$('#filled-in-box2').on('click', function () {
if ($('#filled-in-box2').is(':checked')) { $('select#employee_permanent_address_attributes_country').val($('select#employee_contact_attributes_country').val());
$('select#permanent_address_state_code').val($('select#contact_state_code').val());
}
});
This alone will work for your requirement to change permanent state and country when you click on checkbox.

Populate textbox based on selected radio button

I have 3 radio buttons, when one of them is selected I want to automatically put text in a textbox.
For example, If the user selected the 'TBA' radio button, I want the text 'To Be Advised' put in the textbox, and if they select another radio button I want it to be cleared.
Can anyone help me??
http://jsfiddle.net/ej2hf/1/
Thanks in advance!
This should do:
$('input[name="dest_type"]').on('change', function() {
$('input[type="text"]').val($(this).val());
});
Live demo: http://jsfiddle.net/ej2hf/2/
Try this then
http://jsfiddle.net/ipsjolly/KNct8/
$('input[name="dest_type"]').on('change', function() {
if($(this).val() == "tba"){
$('input[type="text"]').val($(this).val());
}
else
{
$('input[type="text"]').val('');
}
});
​
OR
http://jsfiddle.net/ipsjolly/KNct8/1/
$('input[name="dest_type"]').on('change', function() {
if($(this).val() == "tba"){
$('input[type="text"]').val('To Be Advised');
}
else
{
$('input[type="text"]').val('');
}
});​
In addition to populate the textbox with the value which is selected by default on page load use the below code:
$(document).ready(function(){
$('input[type="text"]').val($('input[name="dest_type"]').val());
$('input[name="dest_type"]').on('change', function() {
$('input[type="text"]').val ($(this).val()); });
});
Assuming that you are or can use the latest jQuery, you can use this:
$(function() {
$('input[name="dest_type"]').on("change", function() {
$('input[type="text"]').val($(this).val());
});
});
See the Fiddle!
If what you need if to toggle the value of TBA, use this:
$(function() {
$('input[name="dest_type"]').on("change", function() {
$('input[type="text"]').val( (($(this).val()=='tba')?($(this).val()):('')) );
});
});
See this Fiddle!
If none of this is what you are trying to do, please rephrase the question or add some more information!
try this,
$(document).ready(function () {
$('input:radio[name="dest_type"]').change(function () {
$("input:text").val($(this).val());
});
})

Categories

Resources