I'm creating a form. I have two fields, 1. default value field and 2. preview field. Both are multiselect fields. The user will add the options to the multiselect manually. Whenever the user chooses an option in the default value, the same value should be shown as selected in the preview field. When the user removes one option, the same option should be unselected. This is how I've written the onchange event for this multiselect:
$("#MultiSelect_DefaultValues").change(function() {
alert($(this).val());
$("#MultiSelect_Preview").val($(this).val());
});
I get the correct value in the alert. But, in the preview field, there is no reaction. All the options available in the default value field are available in the preview field too. But, the options selected in the default value field is not selected in the preview field. What's wrong with this? What should I change, so that the changes in the default field reflects in the preview field too?
You said you are using select2 so execute like this:
$("#MultiSelect_DefaultValues").change(function () {
alert($(this).val());
var prevSelect = $("#MultiSelect_Preview").select2();
prevSelect.val($(this).val()).trigger('change');
});
The values on the option tags need to match for this, if I'm understanding correctly what you're trying to achieve that is.
e.g.
$("#MultiSelect_DefaultValues").change(function() {
console.log($(this).val());
$("#MultiSelect_Preview").val($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="MultiSelect_DefaultValues" multiple>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
<select id="MultiSelect_Preview" multiple>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
You can provide multiple replacements by sending an int array to the select method.
$('#cars').val([1,3]);
//or $('#cars').selectpicker('val', [1,2,3]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="cars" id="cars" multiple>
<option value="1">Volvo</option>
<option value="2">Saab</option>
<option value="3">Opel</option>
<option value="4">Audi</option>
</select>
you can use this code
<script>
$("#MultiSelect_DefaultValues").change(function () {
$('select[id="MultiSelect_Preview"]').find('option[value=' + $(this).val() + ']').attr("selected", true);
});
</script>
Related
Im new to this so apologies if my question is not presented as it should be.
Basically, my aim is with jQuery is to make it so that when the field called 'Apple' is selected from the first dropdown box, the second dropdown box will only allow the field 'Firm' to be selected and the other two be disabled. However if any of the other fruits other than 'Apple' is selected from the first dropdown box then all of the options in the second dropdown box (texture dropdown) will be available to be chosen.
I have looked all over the internet for jQuery code to help me with this issue but as I am new to jQuery I have difficulty finding the solution I need.
Here is my HTML code:
<div class="ingredients_div">
<select name="ingredients_form" id="ingredients_form_1">
<option value="Apple" selected="">Apple</option>
<option value="Orange">Orange</option>
<option value="Lemon">Lemon</option>
<option value="Mango">Mango</option>
</select>
</div>
<div class="texture_div">
<select name="texture_form" id="texture_form_1">
<option value="Firm" selected="">Firm</option>
<option value="Soft">Soft</option>
<option value="Blended">Blended</option>
</select>
</div>
Many thanks
please check this code , i think it works for you.
$("#select1").change(function() {
if ($(this).data('options') == undefined) {
/*Taking an array of all options-2 and kind of embedding it on the select1*/
$(this).data('options', $('#select2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html(options);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select name="select1" id="select1">
<option value="1">Apple</option>
<option value="2">Orange</option>
<option value="3">Lemon</option>
</select>
<select name="select2" id="select2">
<option value="1">Firm</option>
<option value="2">Soft</option>
<option value="3">Blended</option>
</select>
To achieve what you mentioned, you need to use jQuery's event binding on the first select box. As soon as the value is changed, you need to write logic to enable/disable options in the second select box as per the value changed in the first box.
Here is how you can achieve it.
$("#ingredients_form_1").change(function() {
if ($(this).val() === "Apple") {
$("#texture_form_1 option").prop("disabled", true);
$("#texture_form_1 option[value='Firm']").prop("disabled", false);
} else {
$("#texture_form_1 option").prop("disabled", false);
}
});
Please go through jQuery's documentation to know more about selectors, event binding, and most importantly, in the next post, include what you've achieved till then.
I have a drop down list, which is within a pop modal. The drop-down list looks like this:
<select name="EventTypeId" class="form-control formTextBox" id="ddlEventType">
<option value="">Please Select</option>
<option value="1">Assessment</option>
<option value="2">Single Session</option>
<option value="3">Group Session</option>
</select>
And my jquery looks like this:
$("body").on("change", "#ddlEventType", function (e) {
var test = $('#ddlEventType').val();
});
It hits the onchange function no problem, but whenever I select an option on the ddl, the test variable is always "", never gets the value. Can anyone help me with what's going wrong here? Is it because the ddl is inside a modal popup? I actually have a ddl in a different modal popup, with the exact same code and it works completely as it should. There's no conflicting ids on the age either. Can't figure out why I'm not getting the value.
UPDATE
I gave the ddl a class name of ddlEventType, and changed the jquery to
$("body").on("change", "#ddlEventType", function (e) {
var test = $('.ddlEventType').val();
});
and for some reason this worked. Don't get why, but it works and that's all I need. Thanks for your help everyone.
Try this:
$(document).on('change','#ddlEventType',function(){
console.log($(this).val());
});
Are you doing any change to the body. And for preventDefault it should be e.preventDefault();
You can follow the below methods for obtaining the selected value from the select tag using the onchange() attribute.
First method i have called the onchange() directly to the script function.
Second Method i have given directly a function to the select tag and then called the function in the script file.
First Method:
$(document).ready(function(){
$("#ddlEventType").change(function(){
alert($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="EventTypeId" class="form-control formTextBox" id="ddlEventType">
<option value="">Please Select</option>
<option value="1">Assessment</option>
<option value="2">Single Session</option>
<option value="3">Group Session</option>
</select>
Second Method:
function get_value(a)
{
alert(a);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="EventTypeId" class="form-control formTextBox" id="ddlEventType" onchange="get_value(this.value)">
<option value="">Please Select</option>
<option value="1">Assessment</option>
<option value="2">Single Session</option>
<option value="3">Group Session</option>
</select>
Im trying to reset a select field like this
$('#name').change(function(){
$('#name2').val( $('#name2').prop('defaultSelected') );
});
But this dosen't work on select2..
Here is a jsfiddle how I want it to look like and work like it!
And this should be the new one.. http://jsfiddle.net/js3vV/
Add defaultSelected attribute in second dropdown to set default selected value of dropdown , it will allow to return $('#name2').prop('defaultSelected') default value of dropdown,which will reset second dropdown on change in first dropdown.
<select id="name2" defaultSelected="">
<option value="">select all</option>
<option value="1">Text 1</option>
<option value="2">Text 2</option>
<option value="3">Text 3</option>
</select>
$('#name').change(function(){
$('#name2').val( $('#name2').prop('defaultSelected') );
});
$('#name2').change(function(){
$('#name').val( $('#name').prop('defaultSelected') );
});
add one function for that, I tested that, I think it worked.
here ur fiddle,
`
I've been pulling my hair out with this one, although I'm certain the solution is embarrassingly simple! I have developed a pull-down menu that requires a selection before presenting more choices, based on the initial selection. It works fine.
However, I need to have jQuery submit the value of the option chosen without a submit button present. So, basically, when a user selects a fruit size, the user is taken to the relevant page in the option value. I cant figure it out! Heres my code:
jQuery:
<script type="text/javascript">
$(document).ready(function()
{
$('#fruit').change(function()
{
var val = $('#fruit').val();
$('.fruitSubSelect').hide();
if(val)
{
$('#fruit'+val).show();
$('#noFruit').hide();
}
});
});
</script>
CSS to hide size select:
<style type="text/css">
.fruitSubSelect {display: none;}
</style>
HTML:
<form action="nothing">
<select id="fruit">
<option value="">Choose Fruit</option>
<option>Apple</option>
<option>Orange</option>
</select>
<select id="fruitApple" class="fruitSubSelect">
<option value="">Choose Size</option>
<option value="http://www.mysite.com/big-apple.html">Big Apple</option>
<option value="http://www.mysite.com/small-apple.html">Small Apple</option>
</select>
<select id="fruitOrange" class="fruitSubSelect">
<option value="">Choose Size</option>
<option value="http://www.mysite.com/big-orange.html">Big Orange</option>
<option value="http://www.mysite.com/small-orange.html">Small Orange</option>
</select>
<select id="noFruit">
<option value="">Choose A Fruit First</option>
<option value="">Please Select Fruit First</option>
</select>
</form>
Would appreciate any help! Thanks.
I think you're looking for something like this:
$(".fruitSubSelect").change(function(){
window.location.href = this.value;
});
Example: http://jsfiddle.net/jonathon/bWUnR/
This will get the selected value of the dropdown and set the window location to it (so the page will go to it).
the addition of this into your jquery alert's the selected option's URL:
$('.fruitSubSelect').change(function(){
alert($(':selected',$(this)).val());
});
live example: http://jsfiddle.net/274Gv/
With dropdowns, do not use .val(). :selected is what you're looking for. http://api.jquery.com/selected-selector/
i have a form that has select element
<select name="adddisplaypage[]" id="adddisplaypage" multiple="multiple">
<option value="all" label="all">all</option>
<option value="index" label="index">index</option>
<option value="tour" label="tour">tour</option>
<option value="aboutus" label="about us">about us</option>
<option value="contactus" label="contact us">contact us</option>
<option value="destination" label="destination">destination</option>
<option value="reservation" label="reservation">reservation</option>
</select>
can anyone help me to select this option (multiple select) on click i.e the option gets selected when clicked, and deselected if selected on click.
I realized I may have misunderstood your question. Something like the following should work, though I'm not sure about browser support:
$('#adddisplaypage option').click(function(e) {
e.preventDefault();
var self = $(this);
if(self.attr('selected') == '') {
self.attr('selected', 'selected');
} else {
self.attr('selected', '');
}
});
In your click() handler, you could write something like:
$("#adddisplaypage").val("index");
That should select "index", for example.
You can pass an array to the .val() method. For instance:
$('#adddisplaypage').val(['index', 'tour']);