<!doctype html>
<html>
<head>
<body>
<script>
var a=8;
var b=5;
var c=8;
var d=9;
</script>
<select size="5">
<option value="1">"a" seats remaining</option>
<option value="2">"b" seats remaining</option>
<option value="3">"c" seats remaining</option>
<option value="4">"d" seats remaining</option>
</select>
</body>
</html>
In the list, instead of a,b,c,d, can i show the values of the variables like 8,5,8,9?
Give your options an ID for easy access:
<select size="5">
<option id="a" value="1"></option>
<option id="b" value="2"></option>
<option id="c" value="3"></option>
<option id="d" value="4"></option>
</select>
Then you can simple do something like
var a=8;
var b=5;
var c=8;
var d=9;
document.getElementById("a").innerHTML = a + ' seats remaining';
document.getElementById("b").innerHTML = b + ' seats remaining';
document.getElementById("c").innerHTML = c + ' seats remaining';
document.getElementById("d").innerHTML = d + ' seats remaining';
Demo: http://jsfiddle.net/Ayp28/
Try this with using jQuery if you want to replace.
$("select > option").each(function() {
var array = {"a":"8", "b":"5", "c":"8", "d":"9"};
for (var val in array)
this.text = this.text.split('"' + val + '"').join('"' + array[val] + '"');
});
Related
I'm trying to get a drop down menu which has a few options and i can print the total price but i want to add something else like the name of selected option which is written in HERE part. For example if the value of my option is 20 i want to print it like HERE -> 20 but could not make it happen.
Here is the link of my code:
<script type="text/javascript">
function calculatePrice(){
//Get selected data
var elt = document.getElementById("foodItem");
var food = elt.options[elt.selectedIndex].value;
elt = document.getElementById("drinkItem");
var drink = elt.options[elt.selectedIndex].value;
elt = document.getElementById("desertItem");
var desert = elt.options[elt.selectedIndex].value;
elt = document.getElementById("tipItem");
var tip = elt.options[elt.selectedIndex].value;
//convert data to integers
food = parseInt(food);
drink = parseInt(drink);
desert = parseInt(desert);
tip = parseInt(tip);
//calculate total value
var total = food+drink+desert+tip;
//print value to PicExtPrice
document.getElementById("totalPrice").value=total;
}
</script>
<br><br><br><br><br><br>
<center>
<FORM Name="myform">
<SELECT NAME="foodItem" onChange="calculatePrice()" id="foodItem">
<OPTION value="0">Select your food</OPTION>
<OPTION value="35">Anthic Steak </OPTION>
<OPTION value="20">Anthic Lasagna </OPTION>
<OPTION value="15">Anthic Pasta </OPTION>
</SELECT>
<SELECT NAME="drinkItem" onChange="calculatePrice()" id="drinkItem">
<OPTION value="0">Select your drink</OPTION>
<OPTION value="5">Coke </OPTION>
<OPTION value="10">Spritz </OPTION>
<OPTION value="15">Beer </OPTION>
</SELECT>
<SELECT NAME="desertItem" onChange="calculatePrice()" id="desertItem">
<OPTION value="0">Select your desert</OPTION>
<OPTION value="15">Baklava </OPTION>
<OPTION value="20">Sütlaç </OPTION>
<OPTION value="25">Sufle </OPTION>
</SELECT>
<SELECT NAME="tipItem" onChange="calculatePrice()" id="tipItem">
<OPTION value="0">Would you like to tip?</OPTION>
<OPTION value="0">No,thanks. </OPTION>
<OPTION value="10">10TL </OPTION>
<OPTION value="15">15TL </OPTION>
<OPTION value="20">20TL </OPTION>
</SELECT>
</FORM>
<br><br>The amount you have to pay:<br><br><INPUT type="text" id="totalPrice" Size=8>
<script>
</script>
</body>
</center>
</html>
I will create a larger textbox and i want to list them as;
Anthic Steak -> 20TL
Drink -> 10TL
Desert -> 5TL
Tip -> 10TL
Total Price -> 45TL
If you have any ideas, please let me know.
Your code is pretty neat and your existing function calculatePrice can make use of an extra snippet to just create a billing summary as you explained. You are currently using the variable elt to get all the elements by Id, which can be kept unique so that you can later use them to fetch the text value of dropdown, and create a summary. Finally you can add this summary to an empty tag(say div) using its id. Here's an alteration to your JavaScript:
function calculatePrice() {
//Get selected data
var foodElt = document.getElementById("foodItem");
var food = foodElt.options[foodElt.selectedIndex].value;
var drinkElt = document.getElementById("drinkItem");
var drink = drinkElt.options[drinkElt.selectedIndex].value;
desertElt = document.getElementById("desertItem");
var desert = desertElt.options[desertElt.selectedIndex].value;
tipElt = document.getElementById("tipItem");
var tip = tipElt.options[tipElt.selectedIndex].value;
//convert data to integers
food = parseInt(food);
drink = parseInt(drink);
desert = parseInt(desert);
tip = parseInt(tip);
//calculate total value
var total = food + drink + desert + tip;
//print value to PicExtPrice
document.getElementById("totalPrice").value = total;
var summary = '';
if (food > 0) {
summary += foodElt.options[foodElt.selectedIndex].text + ' : ' + food + '\n';
}
if (drink > 0) {
summary += drinkElt.options[drinkElt.selectedIndex].text + ' : ' + drink + '\n';
}
if (desert > 0) {
summary += desertElt.options[desertElt.selectedIndex].text + ' : ' + desert + '\n';
}
if (tip > 0) {
summary += 'Tip' + ' : ' + tip + '\n';
}
document.getElementById("summary").innerHTML = summary;
}
Here's an addition to HTML:
<div id="summary"></div>
Note: You can simply make use of the same variable elt, but you will have to manage summary calculation inline ;)
Trying to change text attribute of an option using its value as a variable.
My trying doesn't work, any help, pls.
Expecting result is:
<option value = 2>earth</option>
var x = 2
var str = 'earth';
$('button').on('click', function(){
$('#sela:option[value = ' + x + ']').attr('text', str);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id='sela'>
<option value = 1>lorem</option>
<option value = 2>ipsum</option>
</select>
<br><br>
<button>CLICK</button>
You have to use $('#sela>option[value = ' + x + ']') to select the direct option child of #sela.
And use text() to update the option text.
var x = 2
var str = 'earth';
$('button').on('click', function() {
$('#sela>option[value = ' + x + ']').text(str);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id='sela'>
<option value=1>lorem</option>
<option value=2>ipsum</option>
</select>
<br><br>
<button>CLICK</button>
this is my first question on here so ill try and be as detailed as possible! I am currently creating a HTML form with a select option with options 1 - 4. My aim is to use a Javascript function to create a certain amount of div's depending on which value the user has selected from the form.
For example, if the user has selected option 2, i want to auto generate 2 div containers. Then, if the user chooses to select another option after... the correct amount of divs will then be created.
My select HTML currently looks like this;
<select id="select_seasons">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
I have created a script which will create a div on button click but this isn't my aim;
var number = 2;
document.getElementById('add').addEventListener('click', function(
) {
var newDiv = document.createElement('div');
newDiv.id = 'container';
newDiv.innerHTML = "<label>Episode " + number + " name</label> <input type='text' name='episode'" + number +" /> <label>Episode " + number + " embed</label> <input type='text' /> ";
document.getElementById('contain_form').appendChild(newDiv);
number++;
});
I would appreciate it if somebody was to help me with the JS i will need to make this functionality and i hope i've explained myself clearly enough in this post!
Feel free to comment and ask for me details if required.
Thanks in advance,
Sam
You need to bind the change event on your select element. Something like this:
var divs = [];
document.getElementById('select_seasons').addEventListener('change', function(e) {
var n = +this.value;
for (var i = 0; i < divs.length; i++) {
divs[i].remove();
}
divs = [];
for (var i = 0; i < n; i++) {
var d = document.createElement("div");
d.className = "new";
document.body.appendChild(d);
divs.push(d);
}
});
.new {
background-color: red;
width: 100px;
height: 20px;
margin: 1px;
}
<select id="select_seasons">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
Solution for your problem: http://jsfiddle.net/43ggkkg7/
document.getElementById('select_seasons').addEventListener('change', function(){
var container = document.getElementById('container');
container.innerHTML = ''; //clear
//Find selected option
var n = 1;
for(var i = 0; i < this.options.length; ++i){
if(this.options[i].selected){
n = ~~this.options[i].value; //Cast to int
break;
}
}
for(var i = 1; i <= n; ++i){ //Because we want to count from 1 not 0
var newDiv = document.createElement('div');
newDiv.id = 'element-' + i;
newDiv.innerHTML = "<label>Episode " + i + " name</label> <input type='text' name='episode[" + i +"]' /> <label>Episode " + i + " embed</label> <input type='text' /> ";
container.appendChild(newDiv);
}
});
//Emit event on page init
document.getElementById('select_seasons').dispatchEvent(new Event('change'));
I will help you to read this now, I don't need another loop to remove the old divs in the container, you can use innedHTML and set it to empty.
<select id="select_seasons">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
document.getElementById('select_seasons').addEventListener('change', function() {
var self = this,
exisiting = document.getElementById('contain_form');
//remove existing divs
exisiting.innerHTML = '';
for(i=1; i<= self.value; i++) {
var newDiv = document.createElement('div');
newDiv.id = 'container';
newDiv.innerHTML = "<label>Episode " + i + " name</label> <input type='text' name='episode'" + i +" /> <label>Episode " + number + " embed</label> <input type='text' /> ";
exisiting.appendChild(newDiv);
}
});
Check this fiddle
If I understood the question correctly, the seasons form should update and auto-fill with the select's number. Use the change event and refresh the form with the selected value.
var selectSeasons = document.getElementById("select_seasons");
selectSeasons.addEventListener('change', function() {
populateForm(parseInt(this.value));
});
function populateForm(numberOfSeasons) {
// first, remove all existing fields
var containForm = document.getElementById("contain_form");
while (containForm.firstChild) {
containForm.removeChild(containForm.firstChild);
}
for (var i = 1; i <= numberOfSeasons; i++) {
addDiv(i);
}
}
function addDiv(number) {
var newDiv = document.createElement('div');
newDiv.id = 'container';
newDiv.innerHTML = "<label>Episode " + number + " name</label> <input type='text' name='episode'" + number + " /> <label>Episode " + number + " embed</label> <input type='text' /> ";
document.getElementById('contain_form').appendChild(newDiv);
number++;
}
Number of seasons:
<select id="select_seasons">
<option value="0">Please make a selection</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<div id="contain_form"></div>
You could use the selected value of the select element:
var number = select.options[select.selectedIndex].value;
For example:
var select = document.getElementById("select_seasons");
var button = document.getElementById("add");
var container = document.getElementById("container");
button.addEventListener("click", function () {
// uncomment the following line if you want the remove the previously generated divs:
//container.innerHTML = "";
var number = select.options[select.selectedIndex].value;
for (var i = 1; i <= number; i++) {
var div = document.createElement("div");
div.innerHTML = "div #" + i;
container.appendChild(div);
}
});
<select id="select_seasons">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<button id="add">Add</button>
<div id="container"></div>
I need to create dropdowns using javascript/jquery
Values in the first dropdown should be as follows:
<option value="0">Select</option>
<option value="1">Occ1</option>
<option value="2">Occ2</option>
Second dropdown should be shown only if the value selected from the first dropdown is other Select
<option value="0">Select</option>
<option value="11">subOcc1</option>
<option value="12">subOcc2</option>
Third dropdown should be shown only if the value selected from the second dropdown is other than Select
<option value="0">Select</option>
<option value="111">superSubOcc1</option>
<option value="112">superSubOcc2</option>
<option value="113">superSubOcc3</option>
<option value="114">superSubOcc4</option>
Can someone please help me with this?
Hope this works for you.
HTML
<select id="select1">
<option value="0">select</option>
</select>
<br/>
<select id="select2">
<option value="0">select</option>
</select>
<br/>
<select id="select3">
<option value="0">select</option>
</select>
JS
for (var key in data) {
$("#select1").append('<option value="' + key + '">' + data[key].name + '</option>');
}
$("#select1").change(function () {
$('#select2').find('option').filter(function () {
return $(this).val() != '0';
}).remove();
$('#select3').find('option').filter(function () {
return $(this).val() != '0';
}).remove();
var currentSelect = $(this).val();
var currentOccupation = data[currentSelect].occupation;
for (var key in currentOccupation) {
$("#select2").append('<option value="' + key + '">' + currentOccupation[key].name + '</option>');
}
});
$("#select2").change(function () {
$('#select3').find('option').filter(function () {
return $(this).val() != '0';
}).remove();
var currentSelect1 = $("#select1").val();
var currentSelect2 = $(this).val();
var currentOccupation = data[currentSelect1].occupation[currentSelect2].occupation;
for (var key in currentOccupation) {
$("#select3").append('<option value="' + currentOccupation[key].occCode + '">' + currentOccupation[key].name + '</option>');
}
});
i have dropdown to select current month and year, i am getting the values properly.
now i need to pass that values into some other div
how to get the dropdown selected default values in another div as a simple text??
it should change if selected values change
Fiddle to describe
http://jsfiddle.net/k1v7ga49/1/
Dropdowns
<select name="one" class=" select1" id="ddlYear">
<option value="-1">Select Year</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
</select>
<select name="two" class="select2" id="ddlMonth">
<option value="-1">Select Month</option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
javascript
var d = new Date(),
month = d.getMonth() + 1,
year = d.getFullYear();
$('.select2 option:eq(' + month + ')').prop('selected', true);
$('.select1').val(year);
$('.select2').on('change', function () {
var selectedYear = ($("option:selected", $('.select1')).text());
if (selectedYear != "Select Year") {
selectedMonth = ($("option:selected", this).text());
loadData(selectedYear, selectedMonth);
}
});
i want selected values in this div (in #monthValue)
<div class="placer"> Current timeperiod is :
<div id="monthValue"></div>
</div>
MY EXPECTED RESULT: Current timeperiod is :2014 OCTOBER
$('.select2, .select1').on('change', function () {
var selectedYear = $('.select1').val();
if (selectedYear != "Select Year") {
selectedMonth = $('.select2').val();
$('#monthValue').text(selectedYear + ' ' + selectedMonth)
}
}).trigger('change');
And to make the displayed values inline add this to the CSS
#monthValue {
display:inline-block;
}
http://jsfiddle.net/Spokey/k1v7ga49/4/
If i got you right you have to just use .text()
$('#monthValue').text(selectedYear + ' ' + selectedMonth);
Fiddle
I made a jsbin for ya, at http://jsbin.com/kidujoxidoku/1/edit
I feel as if you were making your checking of each select element's value too complicated. Simply using the jQuery's val() function should be all you need.
The code is also below for reference.
var d = new Date(),
month = d.getMonth() + 1,
year = d.getFullYear(),
loadData = function(year, month) {
$('.placer #monthValue').html(year + " " +month);
};
$('.select2 option:eq(' + month + ')').prop('selected', true);
$('.select1').val(year);
$('.select2').on('change', function () {
var selectedYear = $('.select1').val(), selectedMonth;
if (selectedYear != "Select Year") {
selectedMonth = $(this).val();
loadData(selectedYear, selectedMonth);
}
});
Just use check of existance of selected data. This is working code, so you can just copy/paste ;)
var d = new Date(),
month = d.getMonth() + 1,
year = d.getFullYear();
$('.select2 option:eq(' + month + ')').prop('selected', true);
$('.select1').val(year);
$('.select2').on('change', function () {
if ($(".select1 option:selected") && $(this).find("option:selected"))
var selectedYear = $(".select1").val();
selectedMonth = $(this).val();
$('#monthValue').text(selectedYear + ' ' + selectedMonth);
}
});