How do we get the MaterializeCSS select box to open programmatically?
/* Please try this solution, this will work */
<div class="input-field col s12">
<select id="mycustomselect">
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Materialize Select</label>
</div>
<script>
$(document).ready(function(){
$("#mycustomselect").click();
});
</script>
Related
As the title says, Im trying to change the values on multiple dropdowns by changing a single dropdown. The multiple dropdowns need to get the same value that is selected in the "Select All" dropdown. Something very similar to a check all for checkboxes.
<select name="changeAll" id="changeAll" onchange="changeAll(this);">
<option value="select" selected="selected">Select</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<select id="currency1" class="form-control">
<option selected value="option1" disabled>Option 1</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<select id="currency2" class="form-control">
<option selected value="option1" disabled>Option 1</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<select id="currency3" class="form-control">
<option selected value="option1" disabled>Option 1</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
The idea is that when a value is selected in the first dropdown "changeAll", all of the other dropdowns will have their values change to match the one selected in the "changeAll" dropdown.
Any help with this would be greatly appreciated.
Based on what you asked, I have tried to simulate. Try to run. Thnx
$('select#changeAll').on('change', function() {
var val_ = $('#changeAll :selected').text();
$('.child-changed option').map(function() {
$(this).text(val_);
$(this).value=val_;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<select name="changeAll" id="changeAll" >
<option value="ca_select" selected="selected">Select</option>
<option value="ca_option1">ca Option 1</option>
<option value="ca_option2">ca Option 2</option>
<option value="ca_option3">ca Option 3</option>
</select>
<div>
</div>
<select id="currency1" class="form-control child-changed">
<option selected value="c1_option1_selected" disabled>currency1 Option 1</option>
<option value="c1_option1">currency1 Option 1</option>
<option value="c1_option2">currency1 Option 2</option>
<option value="c1_option3">currency1 Option 3</option>
</select>
<div>
</div>
<select id="currency2" class="form-control child-changed">
<option selected value="c2_option1_selected" disabled>currency2 Option 1</option>
<option value="c2_option1">currency2 Option 1</option>
<option value="c2_option2">currency2 Option 2</option>
<option value="c2_option3">currency2 Option 3</option>
</select>
<div>
I'm not very practical with jQuery/Javascript, I know how to do it if I specific manually every ID but I know that it's not a good approach to use.
I'm searching for a way, fully dynamic in jQuery, that if a select element (initially with an empty value) have an option selected (value not empty), it show the next select with the same class.
Ex.
That's the HTML:
<div id="sel1" class="sel" style="display: block;">
<select id="select1">
<option selected value>Default Option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
<div id="sel2" class="sel">
<select id="select2">
<option selected value>Default Option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
<div id="sel3" class="sel">
<select id="select3">
<option selected value>Default Option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
And that's the CSS:
.sel {
display: none;
}
So, basically the page start with the first sel1 displayed.
If I select an option that have a value not empty (ex. Option1) it show me automatically the next div with class sel (id=sel2).
If I select an option not empty in the sel2, it show me automatically the next div with class sel (id=sel3)
If I select an option not empty in the sel3 it stop because there's no next div with class sel.
Maybe like so:
$('select[id^=select]').on('change', function(){
if($(this).val().length > 0) {
$(this).closest('div.sel').next('div.sel').css('display', 'block');
}
});
.sel {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sel1" class="sel" style="display: block;">
<select id="select1">
<option selected value>Default Option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
<div id="sel2" class="sel">
<select id="select2">
<option selected value>Default Option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
<div id="sel3" class="sel">
<select id="select3">
<option selected value>Default Option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
This would be it:
$('select').on('change', function(){
var nxt = $(this).parent('div').next(), // next element (div)
opt = $(this).val();
console.log( opt );
if( opt != '' ){
nxt.removeClass('sel');
} else {
nxt.addClass('sel');
}
});
.sel {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sel1" class="sel" style="display: block;">
<select id="select1">
<option selected value>Default Option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
<div id="sel2" class="sel">
<select id="select2">
<option selected value>Default Option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
<div id="sel3" class="sel">
<select id="select3">
<option selected value>Default Option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
I am attempting to select a dropdown option (out of several dropdowns on the page) by its value. I'm posting below code I think is relevant but if more is needed please let me know!
HTML
<form class="controls" id="Filters">
<fieldset>
<select id="select1" class="dropdowns">
<option selected="selected" value=".default1">Default 1</option>
<option value=".option1">Option 1</option>
<option value=".option2">Option 2</option>
</select>
</fieldset>
<fieldset>
<select id="select2" class="dropdowns">
<option selected="selected" value=".default2">Default 2</option>
<option value=".option3">Option 3</option>
<option value=".option4">Option 4</option>
</fieldset>
<fieldset>
<select id="select3" class="dropdowns">
<option selected="selected" value=".default3">Default 3</option>
<option value=".option5">Option 5</option>
<option value=".option6">Option 6</option>
</fieldset>
</form>
jQuery
var example = ".option3";
var example = ".option3";
$('#Filters').find('.dropdowns').val(example).click();
<form class="controls" id="Filters">
<fieldset>
<select id="select1" class="dropdowns">
<option selected="selected" value=".default1">Default 1</option>
<option value=".option1">Option 1</option>
<option value=".option2">Option 2</option>
</select>
</fieldset>
<fieldset>
<select id="select2" class="dropdowns">
<option selected="selected" value=".default2">Default 2</option>
<option value=".option3">Option 3</option>
<option value=".option4">Option 4</option>
</select>
</fieldset>
<fieldset>
<select id="select3" class="dropdowns">
<option selected="selected" value=".default3">Default 3</option>
<option value=".option5">Option 5</option>
<option value=".option6">Option 6</option>
</select>
</fieldset>
</form>
enter code here $('#Filters').find('.dropdowns').val(example).click();
This works, selects the correct dropdown option and the dropdown initiates the filtering process (I'm using MixItUp), but it deselects all other dropdowns making them blank instead of their default values, which should be (in this example) Default 1, Default 2, Default 3, etc. (except of course the dropdown that contains the correct value).
I'm hoping to have jQuery code find the dropdown option with the correct value (example = ".option3") but not affect the other dropdowns and make sure they're still on their default initial values.
I haven't been able to find answers to my problem anywhere so any help would be appreciated!
If I got your point you can use .find('option[value="'+example+'"]').prop('selected', true);
Demo
var example = ".option3";
$('#Filters').find('option[value="'+example+'"]').prop('selected', true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="controls" id="Filters">
<fieldset>
<select id="select1" class="dropdowns">
<option selected="selected" value=".default1">Default 1</option>
<option value=".option1">Option 1</option>
<option value=".option2">Option 2</option>
</select>
</fieldset>
<fieldset>
<select id="select2" class="dropdowns">
<option selected="selected" value=".default2">Default 2</option>
<option value=".option3">Option 3</option>
<option value=".option4">Option 4</option>
</fieldset>
<fieldset>
<select id="select3" class="dropdowns">
<option selected="selected" value=".default3">Default 3</option>
<option value=".option5">Option 5</option>
<option value=".option6">Option 6</option>
</fieldset>
</form>
find does not deselect your selects. val does.
What happens is, $('#Filters') finds the form object. Then .find('.dropdowns') finds all the select objects within it. Then .val(example) sets the value of all of those select objects to .option3. However, that value happens to be invalid for most of them.
What I assume you want is to find only the select objects that actually can take your value, and set the value for those only:
var example = ".option3";
$('#Filters').find('.dropdowns:has(option[value="' + example + '"])').val(example);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="controls" id="Filters">
<fieldset>
<select id="select1" class="dropdowns">
<option selected="selected" value=".default1">Default 1</option>
<option value=".option1">Option 1</option>
<option value=".option2">Option 2</option>
</select>
</fieldset>
<fieldset>
<select id="select2" class="dropdowns">
<option selected="selected" value=".default2">Default 2</option>
<option value=".option3">Option 3</option>
<option value=".option4">Option 4</option>
</select>
</fieldset>
<fieldset>
<select id="select3" class="dropdowns">
<option selected="selected" value=".default3">Default 3</option>
<option value=".option5">Option 5</option>
<option value=".option6">Option 6</option>
</select>
</fieldset>
</form>
(Hopefully your option values won't have crazy things like quotes inside them.)
Please find below solution, I hope this will help you.
var example = ".option3";
$('#Filters').find('.dropdowns').val(example).prop('selected',true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="controls" id="Filters">
<fieldset>
<select id="select1" class="dropdowns">
<option selected="selected" value=".default1">Default 1</option>
<option value=".option1">Option 1</option>
<option value=".option2">Option 2</option>
</select>
</fieldset>
<fieldset>
<select id="select2" class="dropdowns">
<option selected="selected" value=".default2">Default 2</option>
<option value=".option3">Option 3</option>
<option value=".option4">Option 4</option>
</select>
</fieldset>
<fieldset>
<select id="select3" class="dropdowns">
<option selected="selected" value=".default3">Default 3</option>
<option value=".option5">Option 5</option>
<option value=".option6">Option 6</option>
</select>
</fieldset>
</form>
You need to be more specific when selecting your dropdown.
Use the dropdown ID to select it, then choose a value using val(), then trigger a click event, ei.:
var example = ".option3"; $('#Filters').find('.dropdowns #select2 ').val(example).click();
Otherwise you're assigning the value "option3" for all three dropdowns, which is why #select1 and #select3 look empty.
I don't know if it is simple or no. What I want to solve is,
One drop down "select" form field is there, another "input type="text" " field is below. Some options are there in "select dropdown". When I type in Below "input type="text" " field, There should be some suggestions from the above "select" dropdown field (like Auto Complete). Any help?
You can use the normal <select> tag with Select2:
$(function () {
$("select").select2({
width: 250
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.full.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" />
<select name="" id="">
<option value="item-1">Item 1</option>
<option value="item-2">Item 2</option>
<option value="item-3">Item 3</option>
<option value="item-4">Item 4</option>
<option value="item-5">Item 5</option>
<option value="entry-1">Entry 1</option>
<option value="entry-2">Entry 2</option>
<option value="entry-3">Entry 3</option>
<option value="entry-4">Entry 4</option>
<option value="entry-5">Entry 5</option>
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
<option value="option-3">Option 3</option>
<option value="option-4">Option 4</option>
<option value="option-5">Option 5</option>
</select>
I am look for a way to make it so that when the user selects an item form all the select (for which the value of the option is not nil) the div with id "js-market" is shown.
This is my html code:
<form class="js-chose">
<div class="col-md-6 col-xm-12">
<div class="form-group js-select">
<label>Select a Market</label>
<select class="form-control">
<option value='' disabled selected>Chose a Market</option>
<%Item.all.each do |item|%>
<option value="<%=item.id%>"><%=item.name.capitalize%></option>
<%end%>
</select>
</div>
</div>
<div class="col-md-6 col-xm-12">
<div class="form-group">
<label>Enter Market with:</label>
<select class="form-control js-select">
<option value='' disabled selected>Chose a Company</option>
<%Company.where(user_id: current_user.id).each do |company|%>
<option value="<%=company.id%>"><%=company.name%></option>
<%end%>
</select>
</div>
</div>
</form>
In short I need to make jQuery show the div with id="js-market" when both selects have been filled by the user and get the values of the selected items and assign them to a variable.
Thank you. Please let me know if I wasn't clear enough.
Example that works with multiple select elements
Link to jsfiddle
var counter = $('.select').length;
$('.select').change(function() {
$.each($('.select'),function(i,e) {
var t = $(this);
if (t.val() == undefined || t.val() == '') {
$('#js-market').fadeOut();
return;
}
if (i+1 == counter) {
$('#js-market').fadeIn();
}
});
});
#js-market {
display: none;
}
<select class="select">
<option value="">No Value</option>
<option value="value1">Value 1</option>
<option value="value2">Value 2</option>
<option value="value3">Value 3</option>
<option value="value1">Value 4</option>
</select>
<select class="select">
<option value="">No Value</option>
<option value="value1">Value 1</option>
<option value="value2">Value 2</option>
<option value="value3">Value 3</option>
<option value="value1">Value 4</option>
</select>
<select class="select">
<option value="">No Value</option>
<option value="value1">Value 1</option>
<option value="value2">Value 2</option>
<option value="value3">Value 3</option>
<option value="value1">Value 4</option>
</select>
<div id="js-market">Lorem ipsum</div>
See this fiddle
You can do this by onchange() event in javascript. In the fiddle specified above, what I do is that, I've placed 2 select boxes and a div with id demo will be shown only if two of the select boxes are selected.
HTML
<select id="mySelect1" onchange="myFunction()">
<option value="0">--Select--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="mySelect2" onchange="myFunction()">
<option value="0">--Select--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<div id="demo"></div>
JS
function myFunction() {
if (document.getElementById("mySelect1").value > 0 && document.getElementById("mySelect2").value > 0) {
document.getElementById("demo").style.display = "block";
} else document.getElementById("demo").style.display = "none";
}