I have Select tag with 2 options and 1 default just saying "Select year". So I want a the div right after the Select to be hidden on load when the option is still on "Select year". The problem is it only hides the div only when I select one of the options then I choose again "Select year".
This is my code:
When do you want to study?
<select name="ddlYear" ng-model="data.calendar_year">
<option value="">-- Select Year --</option>
<option value"2015" >2015</option>
<option value="2016">2016</option>
</select>
<br/>
<div ng-show="data.calendar_year != 0">
<h3>Qualification type:</h3>
</div>
So basically on load I need the div containing the tag to be hidden but I dont know how.
Thank you
what is the default value for data.calendar_year?
Maybe it equals null or '' so it does !=0.
(if you don't define it before, thats how it is).
Related
I'm building a laravel project (version 9) and I need to use selectize.js for my select inputs.
I need to show a placeholder like "Select product" so users can click on it, search for items and choose one. And I need this field to be required.
Here's a sample select input :
<select name="product_id" id="select_product" class="form-control my-3">
<option value="">Select product</option>
#foreach($products as $product)
<option value="{{$product->id}}" data-price="{{$product->price}}" data-stock="{{$product->stock}}">{{$product->name}}</option>
#endforeach
</select>
This one works fine, it's not required though. And submiting the form with this field empty throws an error, I need it to be required on the front-end level.
BUT, when I add required to the select input, it doesn't show ANY of the options I'm loading inside select box with foreach loop. Doesn't even show a dropdown when I click on it.
Is there a way to have a placeholder and make the field required at the same time in select.js? If not, do you know any alternative to select.js that works with Laravel?
I also tried giving a placeholder through selectize function with JS, nothing changed, it shows placeholder but no items being shown (when the input has required tag).
<select name="customer_id" class="form-control" id="select_customer" required>
<option value=""></option>
#forelse($customers as $customer)
<option value="{{$customer->id}}">{{$customer->name}}</option>
#empty
<option value="" selected disabled>No customer found</option>
#endforelse
</select>
$('select').selectize({
placeholder: 'Select something',
});
Simplest way to put it : Select input doesn't show any options when I add required tag to it. (I'm loading options with laravel blade foreach loop.)
I am attempting to create a form with a select with a bunch of options that are pulled from a database, and also one option that will be a placeholder that will say something like "Choose a title".
The issue I am experiencing is that although the placeholder option is indeed selected and is disabled correctly, it does not display in the actual input list before anyone clicks on it as the selected option.
Required behavior:
Before a user has clicked on the dropdown at all, they should see a dropdown that has the grayed out text of a disabled item that says "Choose a title". When they click on the dropdown, they can then choose from the list of titles that are grabbed from the database.
Current incorrect behavior:
Before a user has clicked on the dropdown at all, they see an empty dropdown menu with nothing written or selected in it. Once they click on the dropdown, it shows that the disabled option is currently selected even though the text doesn't show in the input box (but does in the dropdown), and are able to select one of the non-disabled options that is pulled from the database.
What am I doing wrong here? I've found several things online that tell me to do it the way I have it right now. Here is my code:
<label for="TitleSelector">
What do you want to edit?
</label>
<select name="TitleSelector" id="TitleSelector" v-model="selectedTitle">
<option value="" disabled selected>Choose A Title</option>
<option
v-for="(title, index) in allTitles"
:value="title"
:key="index"
>
{{ title }}
</option>
</select>
I've got it, it works if I v-bind the value of the disabled option like so:
<option :value="null" selected disabled>Choose A Title</option>
I'm working on a service request module of a photography website. The main idea is to choose a service in the first dropdown (wedding, debut, etc) and depending on the choice, a second dropdown would be chosen for the package (different prices and features per package). Choosing a package will then provide a text detailing the features of that said package as seen on the image below.
sample
Now there is a flaw that I don't know where to change. You see, in the image if I try to change the service, the second dropdown resets, but the text remains.
What I want now is to lock the first dropdown after choosing to avoid changing it when the second dropdown emerges. Then I would just provide a reset button that would reset the form (which I also need help).
This is my current code:
HTML
<div id="wrap">
<select id="Service" title="" name="Service">
<option value="" selected hidden>Choose Service ...</option>
<option value="wedding">Wedding</option>
<option value="debut">Debut</option>
<option value="children-party">Children's Party</option>
</select>
<div class="first-level-select">
<div class="wedding">
<select class="second-level-select">
<option value="" selected hidden>Choose package ...</option>
<option value="wedding-package-1">Package 1</option>
<option value="wedding-package-2">Package 2</option>
</div>
<div class="debut">
<select class="second-level-select">
<option value="" selected hidden>Choose package ...</option>
<option value="debut-package-1">Package 1</option>
<option value="debut-package-2">Package 2</option>
</div>
</div>
<div class="second-level-container">
<div class="wedding-package-1">
Php 8,000 <br><br>
Unlimited shots stored in DVD <br>
Edited video with 2 sets of DVD <br>
MTV 4 to 5 minutes (Highlight video)
</div>
<div class="wedding-package-2">
Php 15,000 <br><br>
Unlimited shots stored in DVD <br>
Magazine type album (20 pages, 100 pictures) <br>
Edited video with 2 sets of DVD <br>
MTV 4 to 5 minutes (Highlight video)
</div>
</div>
There's also a second level container text for debut packages but it is too long. You get the idea.
JQUERY
$(document).ready(function() {
$('#Service').bind('change', function() {
var elements = $('div.first-level-select').children().hide(); // hide all the elements
var value = $(this).val();
if (value.length) { // if somethings' selected
elements.filter('.' + value).show(); // show the ones we want
}
}).trigger('change');
$('.second-level-select').bind('change', function() {
var elements = $('div.second-level-container').children().hide(); // hide all the elements
var value = $(this).val();
if (value.length) { // if somethings' selected
elements.filter('.' + value).show(); // show the ones we want
}
}).trigger('change');
});
The problem is whenever I try to add an onchange event in the select dropdown, this happens.
error
It also happened when I used disabled in one of the options in the dropdown (that's why I used hidden).
If anyone could help, it would be really appreciated. I was also wondering how to get inputs from the dropdowns to be thrown in the database for administrator approval. And is it also possible to throw other data that was not specifically in the dropdown, like the price of the package which is just shown in text but should be thrown to the database as an INT type?
Thank you in advance.
Hey guys just been told that hide cannot be used cross browser for select element options.
So I am wondering how I can use disable for the following issue I am having.
This example is simplified, the actual code contains PHP loops and MySQL to display the options and content.
Okay so first of all I have these two select elements:
<select class="form-control select-box">
<option value="make-any">Make (Any)</option>
<option value="BMW">BMW</option>
<option value="Mercedes">Mercedes</option>
<option value="Volvo">Volvo</option>
</select>
<select class="form-control select-box-model">
<option value="make-any">Make (Any)</option>
<option value="C220">C220</option>
<option value="X1">X1</option>
<option value="X5">X5</option>
<option value="XC90">XC90</option>
</select>
I then have these list:
<div class="makes BMW X1">
<ul>
<li>BMW</li>
<li>X1</li>
</ul>
</div>
<div class="makes VOLVO XC90">
<ul>
<li>VOLVO</li>
<li>XC90</li>
</ul>
</div>
<div class="makes MERCEDES C220">
<ul>
<li>MERCEDES</li>
<li>C220</li>
</ul>
</div>
<div class="makes BMW X5">
<ul>
<li>BMW</li>
<li>X1</li>
</ul>
</div>
I am currently using this jQuery to hide the div with the class of 'makes' if the selected option doesn't match the div's class so for example 'BMW':
<script>
$(document).ready(function(){
$('.form-control').change(function(){
var make = $(this).val();
if(make != 'make-any'){
$('.makes').hide();
$('.'+make).show();
} else {
$('.makes').show();
}
});
});</script>
So as you can see I have a bit of a problem because the second select element with the class of "select-box-model" contains all of the models, I'd like to disable the options that aren't associated with the first select element option that has been selected.
For example the list containers contain the classes for the 'Make' and 'Model' of the each vehicle:
<div class="makes BMW X5">
So how can I disable the options that are not associated with that 'Make', for example if the user selects BMW for the first element I'd only like the 'Models' that are associated with the 'Make'.
Any examples would be great, thanks.
Well, I am not completely certain that I have understood your question.
But I am assuming that you mean that if you select a car brand from select one (form control) the available models should be enabled in select two select-box-model. Once selecting the model, the accurate div needs to be shown?
If that is what you're trying to do your markup is not the best structure to achieve that.
Never the less, I made an example using your mark up:
jQuery:
$('.select-box-model').prop('disabled',true);
$('.form-control').on('change',function(){
$('.select-box-model').prop('disabled',false);
if($(this).val() != 'make-any'){
$('.makes').hide();
//check if the models drop down is used
if($(this).hasClass('select-box-model')){
//get selected value
var value = $(this).val();
$('.'+ value).show();
return false;
}
//get selected value
var carBrand = $(this).val();
$('.select-box-model option').prop('disabled',true);
$('.'+ carBrand).find('li').each(function(){
if($.trim(carBrand) != $.trim($(this).text())){
$('.select-box-model option[value="'+ $(this).text() +'"]').attr("disabled", false);
}
});
}
});
Here's a fiddle of that: http://jsfiddle.net/z59v56ec/
A neater solution to achieve this is using ajax to populate the models of the car brand.
But if you really want to do it your way, then the following logic is easier.
Select one holds value of car brand
Select two holds value of car brand and the text is the model
Select one will enable the options in select two with the value of that car brand
On select a model in select two the accurate divs would be shown according to the option text.
On a sidenote, be careful with your references. VOLVO is not the same as Volvo.
Just in case I completely missed the point - sorry! :)
First, you are far better off creating multiple selects and toggling their display based upon your first select's selectedvalue. Then, you create multiple divs and toggle their display based on your second select's selectedvalue. That said, if you really want to attack this "dynamically", you're better off having two selects - and one unordered list - and clearing their contents and rewriting the html as you go:
<select class="form-control select-box" id="selectMake">
<option value="make-any">Make (Any)</option>
<option value="BMW">BMW</option>
<option value="Mercedes">Mercedes</option>
<option value="Volvo">Volvo</option>
</select>
<select class="form-control select-box-model" id="selectModel">
</select>
<ul id="ulCars">
</ul>
$("#selectMake").change(function(){
$("#selectModel").empty();
$("#ulCars").empty();
switch ($(this).val()){
case "BMW":
$("#selectModel").append("<option>X1</option>").val("X1");
$("#ulCars").append("<li>X1</li>");
break;
}
});
etc. etc., but you can easily clear lists and dropdowns - and then repopulate them. But like I said, I'd go with multiple divs and toggling their display.
I want to implement the following system of drop down lists:
I'm aware that drop down lists are implemented using <select> statements. However, I'm not sure if I need to use Javascript commands to handle my requirements listed in the picture. How would you suggest to handle this?
Thanks in advance!
You will have all three drop down on the page but dropdown 2 and 3 will be hidden. On change of first drop down you will have to check the value of first drop down and show second and third dropdown. Demo is available here
In html we define three dropdowns first is visible and second and third are hidden. We will show the hidden dropdown when 3 is selected from first dropdown
<select id="sel1" >
<option > 1 </option>
<option > 2 </option>
<option > 3 </option>
</select>
<select id="sel2" style="display:none" >
<option > 1 </option>
<option > 2 </option>
<option > 3 </option>
</select>
<select id="sel3" style="display:none" >
<option > 1 </option>
<option > 2 </option>
<option > 3 </option>
</select>
In javascript we have show the hidden dropdowns when 3 is selected from first drop down
$('#sel1').change(function ()
{
if($(this).val() == "3")
{
$('#sel2').show();
$('#sel3').show();
}
}
);
I think if you want to only allow the user to select second and third options based on the selection event in the first option, you are probably going to need JavaScript to do this. If you have to cater for users with JavaScript disabled you will have to have something like an Update button that posts to the server where server-side code in ASP.Net / PHP / Django / Node.js or something of that sort, builds the second and third options and returns them to the user.
You can put the second and third dropdowns inside divs and keep them hidden initially. Once the value of first is selected, make the second visible and so on. You can easily do this with javascript. For eg:
function onLoad() {
document.getElementById("dayDropDownDiv").style.visibility="hidden";
}
and create the select inside the div in the body as:
<div id="dayDropDownDiv">
<label for="select-Day" class="select">Day:</label>
<select name="select-day" id="dayDropDown" onchange="dayChange(this)"></select>
</div>
You can also create the dropdowns programmatically in javascript. You'll have to add the <option>s to the <select>'s innerHTML as:
function addValues() {
var dayOptionsList = "";
for(loopIndex=1;loopIndex<=31;loopIndex++){
dayOptionsList = dayOptionsList+"<option>"+loopIndex+"</option>";//<-this will create an options list for days
var daySelector = document.getElementById("dayDropDown");
daySelector.innerHTML = dayOptionsList;//done
}
Finally, make them visible when the first <select>'s particular option is selected:
function firstValueSelected( resultsObj){
var val = obj.options[obj.selectedIndex].text;//<- text of selected option
if(val=="f")
document.getElementById("dayDropDownDiv").style.visibility="visible";
}