I have two select option field.
<div style="float:left; width:7%">
<label>Type</label>
<select name="ostatus" id="ostatus" class="input-small">
<option value="Actual">Actual</option>
<option value="Ghost">Ghost</option>
</select>
<div style="float:left; width:7%">
<label>Upgrade</label>
<select name="oupg" id="oupg" class="input-small">
<option value="Exp" >Exp</option>
<option value="Post" >Post</option>
<option value="Upgrade" >Upg</option>
<option value="Retail" >Retail</option>
<option value="Prepaid" >Prepaid</option>
</select>
If on the Type select, Ghost is selected, I would like to hide option Retail and Prepaid under the upgrade options. How do I go about this? I am able to hide the whole div container for upgrade but I only want to hide those last two options. Please some assistance would be appreciated.
You can use jquery
$(document).ready(function(){
$('#ostatus').on('change',function() {
if($(this).val()== 'Ghost'){
$('#oupg') .find ("option[value=Retail]").hide();
$('#oupg') .find ("option[value=Prepaid]").hide();
}
else{
$('#oupg') .find ("option[value=Retail]").show();
$('#oupg') .find ("option[value=Prepaid]").show();
}
});
});
Using Javascript and display:none css styling you can accomplish this:
<head>
<script type="text/javascript">
function hideOpt() {
var type = document.getElementById("ostatus");
var upgrade = document.getElementById("oupg");
if (type.options[type.selectedIndex].value == 'Ghost') {
upgrade.options[3].style.display = 'none';
upgrade.options[4].style.display = 'none';
// IE exception
upgrade.options[3].disabled = true;
upgrade.options[4].disabled = true;
} else {
upgrade.options[3].style.display = 'block';
upgrade.options[4].style.display = 'block';
// IE exception
upgrade.options[3].disabled = false;
upgrade.options[4].disabled = false;
}
}
</script>
</head>
<label>Type</label>
<select name="ostatus" id="ostatus" onchange="return hideOpt();" class="input-small">
<option value="Actual">Actual</option>
<option value="Ghost">Ghost</option>
</select>
<label>Upgrade</label>
<select name="oupg" id="oupg" class="input-small">
<option value="Exp" >Exp</option>
<option value="Post" >Post</option>
<option value="Upgrade" >Upg</option>
<option value="Retail" >Retail</option>
<option value="Prepaid" >Prepaid</option>
</select>
Edit:
Added else statement to show the options again when 'Actual' is selected.
You can't hide option elements in all browsers, but you can disable them:
document.querySelector("#oupg option[value=Retail]").disabled = true;
document.querySelector("#oupg option[value=Prepaid]").disabled = true;
This will work in IE8 and up.
If you want IE7 and lower support, then:
var opts = document.getElementById("oupg").options;
opts[opts.length - 2].disabled = true;
opts[opts.length - 1].disabled = true;
Related
I would like to know how you could add a help symbol beside a disabled option in a dropdown in html, if possible. I would like it so that when you click on the symbol it then tells you why that option has been disabled. Something similar to the dropdown below.
This is the basic code I have for the dropdown right now.
<select name="description" rows="4" class="form-control">
<option value="RhinoTab"><?php echo _l('estimate_table_option1_1'); ?></option>
<option value="RTi"><?php echo _l('estimate_table_option1_2'); ?></option>
<option value="Magical Shit" disabled>Magical Shit</option>
</select>
I ended up finding an example I was able to use as a work around to get my project working. Instead of having an icon it is when you click on the "disabled" option but it will do something close enough to what I was looking for.
$(function(){
var options_sel_idx = 0;
$("#options").on("change", this, function(event) {
if($(this.options[this.selectedIndex]).hasClass("disabled")) {
alert("a");
this.selectedIndex = options_sel_idx;
} else {
options_sel_idx = this.selectedIndex;
}
});
});
<style type="text/css">
.disabled {color:#808080;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="options" id="options">
<option value="">Select</option>
<option value="1">Options 1</option>
<option value="0" class="disabled">Options 2</option>
<option value="0" class="disabled">Options 3</option>
<option value="0" class="disabled">Options 4</option>
</select>
I have a dropdown where the values are fetched from the database,
now, when the last option which is the " ADD ELEMENTARY SCHOOL" is selected, I want the dropdown to be hidden and an input text will replace the dropdown that will let the user enter a not existing data like this one. Thanks
This is my html code.
<select id="elemschool" class="form-control">
<?php
$select=$dbcon->query("Select * from elem_school");
while ($row=$select->fetch_array()) {
?>
<option value="<?php echo $row['Elem_ID']?>">
<?php echo $row['School_Name']?>
</option>
<?php
}
?>
<option style="background-color: #77A5F8" class="addelem" value="addelementary">- ADD ELEMENTARY SCHOOL -</option>
</select>
<input type="text" class="form-control hidden" name="elem_school" id="elem_school" placeholder="NAME OF SCHOOL">
</div>
First of all please provide us with a snippet of the existing code so we can change it to a working one and secondly what if someone want to select the
MANAOLO FORTICH CENTRAL ELEMENTARY SCHOOL
and selected the
ADD ELEMENTARY SCHOOL option
how would you allow the user to select another option if its not there
What I would recommend is to show/hide or disable/enable the input box depending on what user select from the list
<html>
<head>
</head>
<body>
<select name='school' onchange="newSchool(this.value)">
<option value="">Select a school</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<input type="text" id="input" disabled />
<script>
function newSchool(schoolName) {
if (schoolName == 3) {
document.getElementById("input").disabled = false;
} else {
document.getElementById("input").disabled = true;
}
}
</script>
</body>
</html>
If you want to hide it as well as disabling it
<html>
<head>
</head>
<body>
<select name='school' onchange="newSchool(this.value)">
<option value="">Select a school</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<input type="text" id="input" disabled />
<script>
document.getElementById("input").hidden = true;
function newSchool(schoolName) {
if (schoolName == 3) {
document.getElementById("input").hidden = false;
document.getElementById("input").disabled = false;
} else {
document.getElementById("input").hidden = true;
document.getElementById("input").disabled = true;
}
}
</script>
</body>
</html>
prepare two DOM element. A visible select element and a hidden input element.
bind a change event to select element, and check if the value equal to the value of item named "add elementary school", and then hidden the select element and show the input element.
What I am trying to figure out is how to have an html input field appear when the value of other is selected from a dropdown menu. Right now the values for the dropdown list are coming from the results of a MySQL DB query, which works, but I can not seem to figure out how to get an input to appear when I select the other option.
$query = mysql_query("SELECT type FROM Dropdown_Service_Type"); // Run your query
echo '<select name="service_type">'; // Open your drop down box
echo '<option value="NULL"></option>';
// Loop through the query results, outputing the options one by one
while ($row = mysql_fetch_array($query)) {
echo '<option value="'.$row['type'].'">'.$row['type'].'</option>';
}
echo '<option value="Other">Other</option>';
echo '</select>';// Close your drop down box
Use javascript, like in the example below. We can add an input field and have it hidden by default, using the style attribute:
<input name='otherInput' id='otherInput' type="text" style="display: none" />
var otherInput;
function checkOptions(select) {
otherInput = document.getElementById('otherInput');
if (select.options[select.selectedIndex].value == "Other") {
otherInput.style.display = 'block';
}
else {
otherInput.style.display = 'none';
}
}
<select onchange="checkOptions(this)" name="service_type" id="service_type">
<option value="NULL"></option>
<option value="43">43</option>
<!-- other options from your database query results displayed here -->
<option value="Other">Other</option>
</select>
<!-- the style attribute here has display none initially, so it will be hidden by default -->
<input name='otherInput' id='otherInput' type="text" style="display: none" />
There are 3rd party libraries like jQuery, AngularJS, PrototypeJS, etc., which can be used to make the code simpler by adding shortcut methods for DOM manipulation (though you should read this post). For example, with jQuery, using .on() (for the event handler binding), .show() and .hide() for the input display toggling, etc:
var otherInput;
var serviceTypeInput = $('#service_type');
serviceTypeInput.on('change', function() {
otherInput = $('#otherInput');
if (serviceTypeInput.val() == "Other") {
otherInput.show();
} else {
otherInput.hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="service_type" id="service_type">
<option value="NULL"></option>
<option value="43">43</option>
<option value="Other">Other</option>
</select>
<input name='otherInput' id='otherInput' type="text" style="display: none" />
$(function() {
$('#sample').change(function() {
var val = this.value; // get the value of the select.
if (val == 'other') { // if the value is equal to "other" then append input below the select
$('html').append('<input type="text" id="inputOther"/>');
} else { // else then remove the input
$('#inputOther').remove();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="sample">
<option value="test1">test1</option>
<option value="test2">test2</option>
<option value="test3">test3</option>
<option value="other">other</option>
</select>
I'm new with this JQuery Mobile thing. And the first problem i met in this is i can't set "selected" attr on multiple select option to "false" / unselected in JQuery mobile using Javascript.
A documentation i found told me to refreshing a select so i can manipulate it via javascript here in the bottom of it's page:
http://jquerymobile.com/demos/1.0a4.1/docs/forms/forms-selects.html
I've done it. But i don't know if i did it wrong or what. Here is my code :
<script type="text/javascript">
function SelectAll(){
var select=document.getElementById('sfruit');
if (select.options[1].selected == true){
alert('All Selected');
for (x in select.options){
if(x > 1){
if (select.options[x].selected == true){
alert(select.options[x].value+' selected');
RefreshSelect();
select.options[x].selected == false;
}else{
alert(select.options[x].value+' unselected');
}
}
}
}
}
function RefreshSelect(){
var myselect = $("select#sfruit");
myselect[0].selectedIndex = 5;
myselect.selectmenu("refresh");
}
</script>
<select onChange="SelectAll()" data-native-menu="false" id="sfruit" name="sfruit" multiple>
<option>Select Fruit</option>
<option value="all" selected>All</option>
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="grape">Grape</option>
<option value="melon">Melon</option>
</select>
What i actually want is when i select "All" option, other option that have been selected become unselected.
I'll attaching the image if u all still doesn't understand what i mean, later, it's already late here.
Thanks guys. And please help me. .. :)
I think this is what you want
$(window).load(function(){
$("select#sfruit").change(function () {
$("select#sfruit option:selected").each(function (obj) {
if($(this).index()==1){
alert('All Selected');
$("select#sfruit option:selected").removeAttr("selected");
$("select#sfruit option:eq(1)").attr("selected","");
}
});
});
});
<select data-native-menu="false" id="sfruit" name="sfruit" multiple>
<option>Select Fruit</option>
<option value="all" selected>All</option>
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="grape">Grape</option>
<option value="melon">Melon</option>
</select>
i want to know how can we select more than one option from a select box like given below:
<label for="color">Colors</label>
<select class="inputbox" name="color" id="color" style="width:180px;">
<option value="Black">Black</option>
<option value="White">White</option>
<option value="Tan">Tan</option>
<option value="Navy">Navy</option>
<option value="RoyalBlue">Royal Blue</option>
<option value="Red">Red</option>
<option value="Yellow">Yellow</option>
<option value="Hunter(DarkGreen)">Hunter(Dark Green)</option>
<option value="Kelly(Green)">Kelly(Green)</option>
<option value="Burgundy">Burgundy</option>
</select>
Thanks
All you have to do is use the multiple attribute on the select box.
<select name="some-select" id="some-select" multiple="multiple">
<option>Black</option>
<option>White</option>
<option>Other</option>
</select>
inorder to use multiple values for a named parameter in $_GET/$_POST/$_REQUEST arrays in PHP, you have to name your form field like this:
name="myFieldName[]";
by puting the braces at the end of the name of the field, PHP will be able to store multiple values for that paramter. if you are using multiple checkboxes, or multiple selects, you should name your fields like this.
and don't forget the values for HTML option tags.
in your case, the HTML should be like this:
<select name="some-select[]" id="some-select" multiple="multiple">
<option value="balck">Black</option>
<option value="white">White</option>
<option value="other">Other</option>
</select>
your PHP code that is the action of the form can have the data like this.
$mySelectValues = $_REQUEST['some-select'];
// mySelectValues is an array now
foreach ($mySelectValues as $selected) {
echo $selected;
}
when you are viewing your HTML page, you can select multiple options by holding the Ctrl key and then selecting other options.
Ordinarily an HTML form will allow you to Ctrl-Click multiple options from a combo box, if you use the "multiple" option in the tag.You can also use "Shift-Click" for a range of values.
But the interesting question is how can you implement this so that more than 10% (estimated) of users can figure out how to use it?
I was late here but will try post my answer. may not be the best.
Add multiple attribute to the select and change name="color" to an array like name="color[]"
<label for="color">Colors</label>
<select class="inputbox" name="color[]" id="color" style="width:180px;" multiple>
<option value="Black">Black</option>
<option value="White">White</option>
<option value="Tan">Tan</option>
<option value="Navy">Navy</option>
<option value="RoyalBlue">Royal Blue</option>
<option value="Red">Red</option>
<option value="Yellow">Yellow</option>
<option value="Hunter(DarkGreen)">Hunter(Dark Green)</option>
<option value="Kelly(Green)">Kelly(Green)</option>
<option value="Burgundy">Burgundy</option>
</select>
and php could do something like this
foreach ($_POST['color'] as $selectedColor)
echo $selectedColor."\n";
//and this echos a comma separated string
$colorString=implode(",", $_POST['color']);
echo $colorString;
How to select multiple items? CTRL+Click the Options.
I've had this same problem, and the guys at htmlforums managed to come up with a way.
Heres the forum link:
http://www.htmlforums.com/client-side-scripting/t-select-multiple-items-without-ctrl-117760.html
And heres the answer: (i havn't had time to adapt it to your code, sorry)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Select Test</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript">
// Variables we need
var previous = new Array();
var lastClicked = '';
// We are going to attach event listeners, no code at the bottom or anything hard coded...
function addEvent(obj, evType, fn)
{
if(obj.addEventListener)
{
obj.addEventListener(evType, fn, false);
return true;
}
else if(obj.attachEvent)
{
var r = obj.attachEvent('on' + evType, fn);
return r;
}
else
{
return false;
}
}
// Let's begin when the DOM is ready
addEvent(window, 'load', begin);
// Attach the handlers to our selects
function begin()
{
addSelect('numbers');
addSelect('sm');
addSelect('sm2');
}
// We add a couple of handlers to each
function addSelect(id)
{
var sel = document.getElementById(id);
addEvent(sel, 'click', whichElement);
addEvent(sel, 'click', addRemoveClicked);
}
// Find which element we are looking at on this click
function whichElement(e)
{
if(!e)
{
var e = window.event;
}
if(e.target)
{
lastClicked = e.target;
}
else if(e.srcElement)
{
lastClicked = e.srcElement;
}
if(lastClicked.nodeType == 3) // Safari bug
{
lastClicked = lastClicked.parentNode;
}
}
// Make sure we are displaying the correct items
function addRemoveClicked(e)
{
if(!previous[this.id])
{
previous[this.id] = new Array();
}
// Remember what has been used
if(previous[this.id][lastClicked.value] == 1)
{
previous[this.id][lastClicked.value] = 0;
}
else
{
previous[this.id][lastClicked.value] = 1;
}
var selectBox = document.getElementById(this.id);
// Add correct highlighting
for(var i = 0; i < selectBox.options.length; i++)
{
selectBox.options[i].selected = '';
if(previous[this.id][selectBox.options[i].value] == 1)
{
selectBox.options[i].selected = 'selected';
}
}
}
</script>
</head>
<body>
<form name="selectTest" action="">
<select name="numbers" id="numbers" multiple="multiple" size="6">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<select name="sm" id="sm" multiple="multiple" size="6">
<option value="a">To make</option>
<option value="b">Multiple</option>
<option value="c">Selections</option>
<option value="d">Just Click</option>
<option value="e">With The</option>
<option value="f">Mouse</option>
</select>
<select name="sm2" id="sm2" multiple="multiple" size="6">
<option>Everything</option>
<option>Is</option>
<option>Possible</option>
<option>Until</option>
<option>Proven</option>
<option>Otherwise</option>
</select>
</form>
</body>
</html>
I hope this helps.
Thanks,
Matthew Millar