I am kinda new to programming so I have no idea how to fix my issue.
So I have a select id="one", and what I want is that when the user selects an option it shows a select id="two" and when the user selects an option it shows a select id="three" and so on...
I tried with 'display=none' but I don't really like that way because anyone can make the select show up without selecting an option. Is there any possible way of doing that?
Here is my first select:
<select class="form-control" id="one" required>
<option value="a">a</option>
<option value="b">b</option>
</select>
And when the user picks an option this select must show up:
<select class="form-control" id="two" required>
<option value="c">c</option>
<option value="d">d</option>
</select>
Thank you for your time and I hope you can help me!
I think the issue is related to on select event not binding to dynamically created second select(id="two"). So try adding event listener via Jquery when you create new select box.
$("#one").on('change', function () {
// Add second select box with id="two" here
$('<select id="two"><option></option></select><br/>').appendTo('body');
//After adding select add the event listener
$("#two").on("change", function(){
// Write what you want to do here
});
});
How about this? It's very rough and only works on the basis of showing the next select in DOM order. You could add a data attribute to the select to determine which select to show when the value was changed.
$('select').change(function(){
if ($(this).val()) {
$(this).next('select').show();
}
});
$('select:first').show();
select {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="">- please select -</option>
<option value="a">a</option>
<option value="b">b</option>
</select>
<select>
<option value="">- please select -</option>
<option value="c">c</option>
<option value="d">d</option>
</select>
<select>
<option value="">- please select -</option>
<option value="e">e</option>
<option value="f">f</option>
</select>
If you're worried about someone showing the second select and without submitting something for the first then you can always run a check client side to see if both selects have a value or check server side.
The following form works exactly as expected, and provides a dropdown list to select an option from:
<select id="f-heroes" class="c-form-select__dropdown">
<option value="" disabled selected>Heroes</option>
<option value="captainAmerica">Captain America</option>
<option value="ironMan">Iron Man</option>
<option value="blackWidow">Black Widow</option>
<option value="thor">Thor</option>
</select>
What I am trying to do is this:
<select id="f-heroes" class="c-form-select__dropdown">
<option value=""><?echo getElement('hero');?></option>
</select>
This gets the 'hero' list but displays it below and out of the option window, and leaves me no option to select a value.
I may be missing something really simple here, but can't seem to get this to work, any help much appreciated.
It looks like your mixing PHP and JavaScript here. From my understanding of your question, you're wanting to create a loop that keeps creating 's for each of your superheroes.
If that's correct, you could use PHP and do something like the below:
<select id="f-heroes" class="c-form-select__dropdown">
<option value="" disabled selected>Heroes</option>
<?php
$superHeroes = array('Captain America','Iron Man','Black Widow','Thor');
$i = 0;
while ($i < count($superHeroes)) {
$name = $superHeroes[$i];
echo "<option value='".$name."'>".$name."</option>";
$i++;
}?>
</select>
I must have missed something very trivial, but I cant figure it out.
The select below shows 5 options (as expected), but I cant get access to option 6 and 7. The scrollbar is shown, but the browser doesnt allow me to move it down
<select size='5' multiple name='driver[]'>
<option value= >(No Driver Filter)</option>
<option value=drivername=''></option>
<option value=drivername='alex'>alex</option>
<option value=drivername='marc'>marc</option>
<option value=drivername='frank'>frank</option>
<option value=drivername='james'>james</option>
<option value=drivername='michael'>michael</option>
</select>
I think your code is not well formatted . You should use double quotes for attribute values.
<select size="5" multiple="multiple" name="driver[]">
<option value="" >(No Driver Filter)</option>
<option value="drivername=''"></option>
<option value="drivername='alex'">alex</option>
<option value="drivername='marc'">marc</option>
<option value="drivername='frank'">frank</option>
<option value="drivername='james'">james</option>
<option value="drivername='michael'">michael</option>
</select>
I have a select menu with the weekdays. I would like this menu to have todays day selected. From W3Cschools, I got this simple code for getting an int for todays date:
var d = new Date();
var n = d.getDay();
This would output a 3, since it's wednesday. My problem here is to make the specific day in the list selected. Here is my code for the sropdown:
<div class="matmenu">
<select id="selectDagMat" ONCHANGE="location = this.options[this.selectedIndex].value;">
<option value="wilink/mandag">Måndag</option>
<option value="wilink/tisdag">Tisdag</option>
<option value="wilink/onsdag">Onsdag</option>
<option value="wilink/torsdag">Torsdag</option>
<option value="wilink/fredag">Fredag</option>
<option value="wilink/lordag">Lördag</option>
<option selected="selected" value="wilink/sondag">Söndag</option>
</select>
Also, an example of the page can be found here:
http://stilius.se/wilink/
Thanks in advance!
Do you mean like this: http://jsfiddle.net/xuPz2/1/ ? You get the element via getElementById and then you set the value.
I want to have a drop down list using the select, option tag... but when it first appear I want it to have an information, such as "Please select a name" then the user clicks on the drop down list and selects from the available option... I tried to made the "Please select a name" as an option, but then the user will be able to select this... which is not what I want. Do I need to use javascript to have this feature or what do I need to do?
If there'a jquery way to do this, this would be much helpful
Try this:
<select>
<option value="" disabled="disabled" selected="selected">Please select a name</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
When the page loads, this option will be selected by default. However, as soon as the drop-down is clicked, the user won't be able to re-select this option.
<select>
<option value="" style="display:none">Choose one provider</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
This way the user cannot see this option, but it shows in the select box.
Have <option value="">- Please select a name -</option> as the first option and use JavaScript (and backend validation) to ensure the user has selected something other than an empty value.
This is an old post, but this worked for me
<select>
<option value="" disabled selected>Please select a name...</option>
<option>this</option>
<option>that</option>
</select>
<select name="test">
<option hidden="true">Please select a name</option>
<option value="Cash">Cash</option>
<option value="Draft">Demand Draft No.</option>
<option value="Cheque">Cheque No.</option>
</select>
Maybe this can help you resolve without JavaScript
http://htmlhelp.com/reference/html40/forms/option.html
See DISABLE option
Simple, I suppose. The onclick attribute works nicely...
<select onchange="if(this.value == '') this.selectedIndex = 1; ">
<option value="">Select an Option</option>
<option value="one">Option 1</option>
<option value="two">Option 2</option>
</select>
After a different option is selected, if the first option is selected, Option 1 will be selected. If you want an explanation on the javascript, just ask.
<select>
<option value="" disabled="disabled" selected="selected">Please select name</option>
<option value="Tom">Tom</option>
<option value="Marry">Marry</option>
<option value="Jane">Jane</option>
<option value="Harry">Harry</option>
</select>
If you want to achieve the same for the jquery-ui selectmenu control then you have to set 'display: none' in the open event handler and add '-menu' to the id string.
<select id="myid">
<option value="" disabled="disabled" selected="selected">Please select name</option>
<option value="Tom">Tom</option>
<option value="Marry">Mary</option>
<option value="Jane">Jane</option>
<option value="Harry">Harry</option>
</select>
$('select#listsTypeSelect').selectmenu({
change: function( event, data ) {
alert($(this).val());
},
open: function( event, ui ) {
$('ul#myid-menu li:first-child').css('display', 'none');
}
});
I'm sorry to necro an old post - but I found a better way of doing this
What I believe this poster wanted was :
<label for="mydropdown" datalabel="mydropdown">Country:</label>
<select name="mydropdown">
<option value="United States">United States</option>
<option value="Canada">Canada</option>
<option value="Mexico">Mexico</option>
<option value="Other">Not Listed</option>
</select>
I found this information in another post while searching for this same answer - Thanks
<select>
<option value="" disabled selected hidden>Select an Option</option>
<option value="one">Option 1</option>
<option value="two">Option 2</option>
</select>
Make a JavaScript control that before the submit cheek that the selected option is different to your first option
This is how I do this with JQuery...
using the jquery-watermark plugin (http://code.google.com/p/jquery-watermark/)
$('#inputId').watermark('Please select a name');
works like a charm!!
There is some good documentation at that google code site.
Hope this helps!
<select>
<option value="" disabled="disabled" selected="selected">Please select a
developer position</option>
<option value="1">Beginner</option>
<option value="2">Expert</option>
</select>
From what I understand, you are looking for a placeholder for your select options, which has to be selected when no value is pre-selected, and cannot be selected by user, or seen.
<select name="selectOne">
<option value="" disabled selected hidden>Choose an option</option>
<option value="this">This</option>
<option value="that">That</option>
</select>