How can i upgrade my select tag with additional options that can be added by a user?
F.E:
<select id = "sport">
<option value = "football"> football </option>
<option value = "volleyball"> volleyball </option>
<option value = "rugby"> rugby</option>
</select>
I need there a additional text input where a user can add new option to the select tag,
If user write an another type of sport i would like to have that sport permament as a option in my select tag.
Regards,
Take a look to the Select2 library and the "Dynamic option creation"
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css"
rel="stylesheet"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select class="form-control js-example-tags">
<option selected="selected">orange</option>
<option>white</option>
<option>purple</option>
</select>
<script>
$(".js-example-tags").select2({
tags: true,
});
</script>
Hope this helps :)
Related
I want to enter a combobox a number and that automatically I paint the amount of combobox in the web page, can someone help me with some tutorial?
In the combobox if I insert 5 I want it to be generated in another div automatically 5 combobox in which I will receive an integer. And if I insert 0 do not want anything to be generated, an example is on the following page
http: //www.pricetravel .com.mx /
In the hotels section if you enter a number greater than zero, the fields are automatically generated
I have written a Jquery code to fulfil your requirement.
$(document).ready(function() {
$("#cbo-select").change(selectedElementChanged);
});
function selectedElementChanged() {
var selectedValue = $("#cbo-select").val();
if (parseInt(selectedValue)) {
$("#area").empty();
for (var i = 0; i < selectedValue; i++) {
$("#area").append('<select><option>test</option></select></br>');
}
}
}
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<select id="cbo-select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<div id="area">
</div>
</body>
</html>
<pre>
<td>
<select name="proses1" class="form-control">
<option value="0" selected>-------</option>
<option value="1">1-Itemset</option>
<option value="2">2-Itemset</option>
<option value="3">3-Itemset</option>
</select>
</td>
<td>
<select name="proses2" class="form-control">
<option value="0" selected>-------</option>
<option value="1">1-Itemset</option>
<option value="2">2-Itemset</option>
<option value="3">3-Itemset</option>
</select>
</td>
<td>
<select name="proses3" class="form-control">
<option value="0" selected>-------</option>
<option value="1">1-Itemset</option>
<option value="2">2-Itemset</option>
<option value="3">3-Itemset</option>
</select>
</td>
</pre>
i have tag html like above.. and i want for example i selected 1-itemset from proses1 and then i choose 1-itemset from proses2,
1-itemset from proses1 it get back to default(-------),
so the point is i want option just can selected one option.. how i can make it. thanks before
Although you havent said what type of process you want, i suggest you do it with jquery like
var selects = $("select[name=proses1],select[name=proses2],select[name=proses3]");
selects.on("change",function(evt){
selects.not("[name=" + evt.target.name + "]").val(0);
});
FIDDLE
EDIT
To use this, first you need to add jQuery library to your code then place this inside $(document).ready() method. As a summary, place the code below inside your head section.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var selects = $("select[name=proses1],select[name=proses2],select[name=proses3]");
selects.on("change",function(evt){
selects.not("[name=" + evt.target.name + "]").val(0);
});
});
</script>
What this does is to add an onChange event handler with .on("change") method to the select elements and in that handler all select elements values are being set to 0 which is the very first option except the current one.
I've got an HTML form that I'm using JavaScript to submit with the 'onchange' function of a select control like this:
<form action='seeLocation.php?'>Jump To Location:
<select onchange='this.form.submit()'>
<option value='1'>Location1</option>
<option value='2'>Location2</option>
<option value='3'>Location3</option>
</select>
</form>
The problem is, I need to pass the <option>'s value tag into the form's action tag such it's actually something like
<form action='seeLocation.php?1'>
or
<form action='seeLocation.php?2'>
etc.
Is that possible? Thanks!
In your onchange function I think you can do this (haven't tested it):
this.form.action="seeLocation.php?"+this.options[this.selectedIndex].value;this.form.submit()
Change your html to be:
<script type="text/javascript">
function changeDropDown(dropdown){
var location = dropdown.options[dropdown.selectedIndex].value;
document.getElementById("form1").action = "seeLocation.php?" + location;
document.getElementById("form1").submit();
}
</script>
<form id="form1" name="form1">Jump To Location:
<select onchange='changeDropDown(this);'>
<option value='1'>Location1</option>
<option value='2'>Location2</option>
<option value='3'>Location3</option>
</select>
</form>
You can also do it inline if you need less verbose code.
Here is my select box:
<select id="category">
<option value="">Pick a choice!</option>
<option value="">choice1</option>
<option value="">choice2</option>
<option value="">choice3</option>
<option value="">choice4</option>
</select>
I want the Pick a choice! option to be removed when the user click on the select box. If the user click anywhere else, the Pick a choice! option come back. I don't want the user to be able to pick the Pick a choice! option. What should I do?
Without some PHP or JavaScript to remove the option dynamically you do have another very simple option that I use regularly, this is the disabled="disabled" option. The option will remain but the user won't be able to actually select it.
The failure with this is if someone just submits a form without choosing anything the empty value will submit in the form, but this is where your validation handling comes into play.
Your code for the "Pick a choice!" option will look something like this:
<option disabled="disabled">Pick a choice!</option>
I hope it helps.
CSS Only Sol'n
So, I know this post is quite old now, but a css only solution wasn't offered... Much more efficient way of accomplishing this. Notice the first <option> doesn't have a value attribute; this allows it to effectively placehold.
#category:focus option:first-of-type {
display: none;
}
<select id="category">
<option>Pick a choice!</option>
<option value="choice1">choice1</option>
<option value="choice2">choice2</option>
<option value="choice3">choice3</option>
<option value="choice3">choice4</option>
</select>
Here is some workaround. Don't know wether this is suite your requirement.
<html>
<head>
<title>Untitled Document</title>
<script>
function doremove()
{
var obj=document.getElementById("category");
obj.remove(0);
}
function addOpt()
{
var obj=document.getElementById("category");
var option=document.createElement("option");
option.text="Pick a choice!";
option.value = 0;
obj.add(option,1);
obj.value = 0;
}
</script>
</head>
<body>
<select id="category" onfocus="doremove();" onblur="addOpt();">
<option value="0">Pick a choice!</option>
<option value="">choice1</option>
<option value="">choice2</option>
<option value="">choice3</option>
<option value="">choice4</option>
</select>
<input type="text" />
</body>
</html>
Try this
$("#SelectID option:first").remove();
I am developing a form in which I need to show a list box when the user selects one of the options in a select box. This means that initially the list box will be hidden, and when the user clicks on an option the list box should be displayed.
Thanks in advance for your quick response, Tanu
This could be done using jQuery easily.
<select id="Univ">
<option value="1">DU</option>
<option value="2">IIT</option>
<option value="3">MU</option>
<option value="4">BHU</option>
</select>
<select id="branch">
<option value="1">Bio</option>
<option value="2">Chemistry</option>
<option value="3">Physics</option>
<option value="4">Engg</option>
</select>
jQuery:
$(document).ready(function () {
$('#branch').hide();
$('#Univ').click(function () {
$('#branch').show();
});
});
Dont forget to include the jQuery reference file in your HTML:
<script type="text/javascript" src="jquery.js"></script>