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>
Related
I want to add value to option based on text in option field.
Here is code:
<select id="select_1">
<option>09:30</option>
<option>10:00</option>
<option>11:30</option>
</select>
jQuery code itself is to automatically add the 'value' attribute and value based on the text
<select id="select_1">
<option value="0930">09:30</option>
<option value="1000">10:00</option>
<option value="1130">11:30</option>
</select>
It's possible?
Yes, this is possible,
To test it, run the code snippet and change the select list.
$("#select_1 > option").each(function() {
this.value = this.text.replace(':', '');
});
$("#select_1").on('input', function() {
alert(this.value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select_1">
<option>09:30</option>
<option>10:00</option>
<option>11:30</option>
</select>
Inspect in chrome seem like this
Try this
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<select id="select_1">
<option>09:30</option>
<option>10:00</option>
<option>11:30</option>
</select>
</body>
<script>
$(document).ready(function() {
$("option").each(function(index) {
$(this).attr("value", $(this).html());
});
});
</script>
</html>
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 :)
Open this link in IE to exactly understand the behavior that I will be describing and seek a hack for.
I have the following select list:
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
When I render this in IE, drop-down behavior of this changes compared to other browsers due to which some of the options are pushed above the selectbox while the others are pushed below (based on the selected option)
Since this is the default behavior of IE, what I am looking for is that the options should get re-ordered i.e. the option that a user selects should be made the first option. Check the image below:
Does anyone have a work-around for this ?
Also if anyone knows a hack to alter this default IE behavior, it would be great to know and learn that
Is this the right way ?
<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
var choose = $("#choose").bind('change',function(){alert("hello");
choose.find('option:selected').prependTo(choose);
});
});
</script>
<head>
<body>
<select id="choose">
<option value="choose">choose</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
Here is a method that works in Jquery:
HTML
<select id = "choose">
<option value="null" name="volvo">Volvo</option>
<option value="1" name="saab">Saab</option>
<option value="2" name="mercedes">Mercedes</option>
<option value="3" name="audi">Audi</option>
</select>
jQuery
var choose = $("#choose").bind('change',function(){
choose.find('option:selected').prependTo(choose);
});
(Source)
FULL CODE
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
var choose = $("#choose").bind('change', function() {
alert("hello");
choose.find('option:selected').prependTo(choose);
});
});
</script>
<head>
<body>
<select id="choose">
<option value="choose">choose</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
<html>
<head>
<script src="jquery-3.1.0.js"></script>
<script>
$(function () {
var selectedItem = $("#selectItem").bind('change', function () {
selectedItem.find('option:selected').prependTo(selectedItem);
});
});
</script>
<head>
<body>
<select id="selectItem">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>
</body>
</html>
Thanks... :)
I currently have a drop down list with a few values in it, I was wondering if it is possible to have a image next to the drop down list that changes corresponding to the value in the drop down list?
This the code for my drop down list. If you need anymore information please ask.
<form id="formddl">
<a id="infoheader">GreenB Colour</a> <br><br>
<div class="header">
<select>
<option value="0">Ivory White</option>
<option value="1">Carbon Black</option>
</select>
</div> <br><br>
<script src="fancystyle1/js/jquery.simple.select.js"></script>
<script type="text/javascript">
$(function() {
$('select').selectBoxes();
});
</script>
</form>
You can do it like this:
$("#iama").children().click(function changeImage(){
var value = $("#iama option:selected").val();
if (value == 1){
$("#image").attr("src","http://lorempixel.com/400/200/");
}
else {
$("#image").attr("src","http://lorempixel.com/600/200/");
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<select id="iama">
<option value=1>image for value 1</option>
<option value=2>image for another value</option>
</select>
<img id ="image" src="http://lorempixel.com/200/200/"/>
I have the following code in a jsp file (on Adobe CQ) but, it returns null. Not sure why. I am expecting the out.println line to return 40 since it is the default selected value.
<select id="itemsperpage" name="itemsperpage">
<option value="20">20</option>
<option value="40" selected>40</option>
<option value="100">100</option>
<option value="200">200</option>
</select>
<%
String itemsPerPage = request.getParameter("itemsperpage");
out.println("Items: " + itemsPerPage );
%>
your code will always return null. try to see page source after running your application. value of Items is always null.
try following code: (in this code I am sending a request on every time the value of combobox is changed)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body onload="form1.submit();">
<form action="#" name="form1">
<select id="itemsperpage" name="itemsperpage" onchange="submit();">
<option value="20">20</option>
<option value="40" selected>40</option>
<option value="100">100</option>
<option value="200">200</option>
</select>
</form>
<%
String itemsPerPage = request.getParameter("itemsperpage");
out.println("Items: " + itemsPerPage );
%>
</body>
</html>
[Note: i will suggest you to not use scriplets in your jsp file, instead you can go for AJAX , JSTL etc. ]