I have found here an answer to a question about concatenating menu selection to string using javascript.
I wonder if is it possible to change the select elements to multiple to create all possible combinations from selected values?
<form>
<input form="form" type="hidden" name="product_data[product]" id="product_description_product" value="{$product_data.product}" />
<script type='text/javascript'>
$("#product_description_product_1, #product_description_product_2, #product_description_product_3").change(function(){
concatenated_string = $("#product_description_product_1").val() +
$("#product_description_product_2").val() +
$("#product_description_product_3").val();
$("#product_description_product").val(concatenated_string);
})
</script>
<select size="5" multiple="multiple" id="product_description_product_1">
<optgroup label="Box size">
<option value="Extra small">Extra small</option>
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
<option value="Extra Large">Extra Large</option>
</optgroup>
</select>
<select size="5" multiple="multiple" id="product_description_product_2">
<optgroup label="Speciality">
<option value="organic">organic</option>
<option value="seasonal">seasonal</option>
<option value="locally grown">locally grown</option>
<option value="exotic">exotic</option>
<option value="gourmet">gourmet</option>
</optgroup>
</select>
<select size="5" multiple="multiple" id="product_description_product_3">
<optgroup label="Type of box">
<option value="veg box">veg box</option>
<option value="fruit box">fruit box</option>
<option value="fruit & veg box">fruit & veg box</option>
</optgroup>
</select>
</form>
If I select for example:
from first select element: Small, Medium
from second select element: organic, gourmet
from third select element: fruit box
return me different strings with all possible combinations
Small organic fruit box
Medium organic fruit box
Small gourmet fruit box
Medium gourmet fruit box
Why don't you use array to save the values?
A simple way would create 3 arrays:
var itemsBoxSize;
var itemsSpeciality;
var itemsTypeBox;
So, when user select an item, adds it to the array. For example:
itemsBoxSize.push("Small");
Finally, you access all arrays:
for (i = 0; i <= itemsBoxSize.length; i++) {
var resultString = itemsBoxSize[i] + " " + itemsSpeciality[i] + itemsTypeBox[i];
}
Something like that!
I'm not sure if it's correct, but it's on the right way:
Note: it is still a little bit manual, but you can try to automate it.
HTML:
<div id="result"></div>
<form id="optionsForm">
<select size="5" multiple="multiple" id="boxSize">
<optgroup label="Box size">
<option value="Extra small">Extra small</option>
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
<option value="Extra Large">Extra Large</option>
</optgroup>
</select>
<select size="5" multiple="multiple" id="speciality">
<optgroup label="Speciality">
<option value="organic">organic</option>
<option value="seasonal">seasonal</option>
<option value="locally grown">locally grown</option>
<option value="exotic">exotic</option>
<option value="gourmet">gourmet</option>
</optgroup>
</select>
<select size="5" multiple="multiple" id="typeBox">
<optgroup label="Type of box">
<option value="veg box">veg box</option>
<option value="fruit box">fruit box</option>
<option value="fruit & veg box">fruit & veg box</option>
</optgroup>
</select>
</form>
JQUERY:
$(document).ready(function() {
// It also is used to clear the array
function initItems() {
items["boxSize"] = [];
items["speciality"] = [];
items["typeBox"] = [];
}
var items = [];
initItems();
// When user selects items
$("#optionsForm").change(function() {
initItems(); // Clear items
$("select :selected").each(function(i, selected) {
var selectId = $(this).closest("select").attr("id");
items[selectId].push($(selected).text());
});
showResult();
});
function showResult() {
var s = "";
var highestLenght = getHighestLenght();
var partialLength;
for (i = 0; i < highestLenght; i++) {
// BOX SIZE
partialLength = items["boxSize"].length;
if (partialLength >= highestLenght) {
s += items["boxSize"][i] + " ";
} else {
s += items["boxSize"][partialLength - 1] + " ";
}
// SPECIALITY
partialLength = items["speciality"].length;
if (partialLength >= highestLenght) {
s += items["speciality"][i] + " ";
} else {
s += items["speciality"][partialLength - 1] + " ";
}
// TYPE BOX
partialLength = items["typeBox"].length;
if (partialLength >= highestLenght) {
s += items["typeBox"][i] + " ";
} else {
s += items["typeBox"][partialLength - 1] + " ";
}
s += "<br>";
}
$('#result').html(s);
}
// What is the highest amount of elements?
function getHighestLenght() {
var highestValues = [];
highestValues.push(items["boxSize"].length);
highestValues.push(items["speciality"].length);
highestValues.push(items["typeBox"].length);
var highest = Math.max.apply(null, highestValues);
return highest;
}
})
Related
I'm very new to javascript as you may be able to tell, I'm trying to create a function that will replace a piece of text with either 1 value or the result of an equation based on what is selected via a dropdown menu. I don't know if I'm just being dense and it's something small I messed up or if it's something more complex that I'm missing.
Thank you in advance for any assistance.
<!DOCTYPE html>
<html>
<body>
<label for="gval">G Value:</label>
<input type="text" id="gval" name="gval">
<label for="sval">S Value:</label>
<input type="text" id="sval" name="sval">
<label for="bval">B Value:</label>
<input type="text" id="bval" name="bval">
<label for="dval">D Value:</label>
<input type="text" id="dval" name="dval">
<select id="Level">
<option value="default" selected>1-18</option>
<option value="1">Level 1</option>
<option value="2">Level 2</option>
<option value="3">Level 3</option>
<option value="4">Level 4</option>
<option value="5">Level 5</option>
<option value="6">Level 6</option>
<option value="7">Level 7</option>
<option value="8">Level 8</option>
<option value="9">Level 9</option>
<option value="10">Level 10</option>
<option value="11">Level 11</option>
<option value="12">Level 12</option>
<option value="13">Level 13</option>
<option value="14">Level 14</option>
<option value="15">Level 15</option>
<option value="16">Level 16</option>
<option value="17">Level 17</option>
<option value="18">Level 18</option>
</select>
<span Id="HPVAL">640-247</span>
<script>
var e = document.getElementById("Level");
function onChange() {
var Result = BVALUE+GVALUE*((LVALUE-1)*((0.66+(SVALUE/100-0.05))+((1-(0.66+(SVALUE/100-0.05)))/17)*(LVALUE-1)))
var LVALUE = e.value;
var text = e.options[e.selectedIndex].text;
var HPVALVAR = document.getElementById('HPVAL');
var SVALUE = document.getElementById('sval').value;
var GVALUE = document.getElementById('gval').value;
var BVALUE = document.getElementById('bval').value;
var DVALUE = document.getElementById('dval').value;
const span = (HPVALVAR);
if (LVALUE="default") {
span.innerHTML = DVALUE;
}
else {
span.innerHTML = Result;
}
}
e.onchange = onChange;
onChange();
</script>
</body>
</html>
The way it is meant to function:
it shows a default value you choose an option from the dropdown if the option is the default then it goes back to whatever the default text is supposed to be (I'm not sure how to store values away for later yet so I just have it connected to a text box which I manually enter the info into)
if you choose a value that isn't the default it runs an equation based on values in the other boxes and the value of the current dropdown option, it then replaces the span text with the results of that equation.
You should use == for value or === for type and value comparison.
= is an assignment operator and returns true in if statement.
You can read more about it in the official doc: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#comparison_operators
<!DOCTYPE html>
<html>
<body>
<label for="gValue">G Value:</label>
<input type="text" id="gValue" name="gValue"><br/>
<label for="sValue">S Value:</label>
<input type="text" id="sValue" name="sValue"><br/>
<label for="bValue">B Value:</label>
<input type="text" id="bValue" name="bValue"><br/>
<label for="dValue">D Value:</label>
<input type="text" id="dValue" name="dValue"><br/>
<select id="level">
<option value="default" selected>1-18</option>
<option value="1">Level 1</option>
<option value="2">Level 2</option>
<option value="3">Level 3</option>
<option value="4">Level 4</option>
<option value="5">Level 5</option>
<option value="6">Level 6</option>
<option value="7">Level 7</option>
<option value="8">Level 8</option>
<option value="9">Level 9</option>
<option value="10">Level 10</option>
<option value="11">Level 11</option>
<option value="12">Level 12</option>
<option value="13">Level 13</option>
<option value="14">Level 14</option>
<option value="15">Level 15</option>
<option value="16">Level 16</option>
<option value="17">Level 17</option>
<option value="18">Level 18</option>
</select>
<br/>
<p>RESULT: <b><span id="hpValue">640-247</span></b></p>
<script>
var levelElement = document.getElementById("level");
level.addEventListener('change',
function(e) {
var levelValue = levelElement.value;
var levelText = levelElement.options[levelElement.selectedIndex].text;
var hpElem = document.getElementById('hpValue');
var gValue = document.getElementById('gValue').value;
var sValue = document.getElementById('sValue').value;
var bValue = document.getElementById('bValue').value;
var dValue = document.getElementById('dValue').value;
var result = bValue + gValue * ((levelValue - 1) * ((0.66 + (sValue / 100 - 0.05)) + ((1 - (0.66 + (sValue / 100 - 0.05))) / 17) * (levelValue - 1)))
levelValue == "default" ? hpElem.textContent = dValue : hpElem.textContent = result;
})
</script>
</body>
</html>
I am making a system in which a user can change a select drop down and it will give them a prompt to ensure they want to take the action. Here is my code:
function changeResStatus(str1) {
var id = str1;
var status = document.getElementById("resstatus" + id).value;
var r = confirm("Change status for ID # " + id + " to " + status + "?");
if (r == true) {
console.log ("change made");
}else{
console.log ("change not made");
}
}
In the event the change is not made, I would like the select menu to go back to the previous option it was before the user attempted to change it. How would I do that?
please try this one.
$(document).on('change','.mydropdown',function(){
var previousValue = $(this).attr("data-previousvalue");
var r = confirm("Change status for");
if (r == true)
{
$(this).attr("data-previousvalue",$(this).val())
}
else
{
$(this).val($(this).attr("data-previousvalue"));
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="mydropdown" data-previousvalue="0">
<option value="0">select something</option>
<option value="1">something 1</option>
<option value="2">something 2</option>
<option value="3">something 3</option>
</select>
<select class="mydropdown" data-previousvalue="0">
<option value="0">select something</option>
<option value="101">something 101</option>
<option value="102">something 102</option>
<option value="103">something 103</option>
</select>
<select class="mydropdown" data-previousvalue="0">
<option value="0">select something</option>
<option value="201">something 201</option>
<option value="202">something 202</option>
<option value="202">something 203</option>
</select>
I want to access options on select based on value. I have the array from backend then I converted it to JavaScript array, but I got this error
Uncaught Error: Syntax error, unrecognized expression: #workShop option[value=parentClosedWS[i]]
When I print the ParentCloseWS, it has values like this ["str1", "str2"]
Here is the code:
var parentClosedWS = <?php echo json_encode($parentClosedWS);?>;
var closedWS = <?php echo json_encode($closedWS );?>;
console.log(closedWS);
console.log(parentClosedWS);
for (i = 0; i < parentClosedWS.length; i++) {
console.log(typeof(parentClosedWS[i]));
var parent = String(parentClosedWS[i]);
console.log(parent);
$("#workShop option[value=" + 'parentClosedWS[i]' + "]").prop('disabled', true);
}
This is the HTML:
<select id="workShop" class="floatLabel" name="workshopsel">
<option value="" class="empty"></option>
<option value="Marketing">Marketing </option>
<option value="Sales">Sales</option>
<option value="IT">IT</option>
<option value="Graphic Design">Graphic Design</option>
<option value="HR">HR</option>
<option value="Supply chain">Supply chain</option>
<option value="Media production">Media production</option>
<option value="Development">Development</option>
<option value="TOT">TOT</option>
<option value="Project management">Project management</option>
</select>
Remove the single quotes around parentClosedWS[i];. Those single quotes are converting it to that specific string, rather than giving you the value.
The line should read:
$("#workShop option[value=" + parentClosedWS[i] + "]").prop('disabled', true);
Here is a working example:
var parentClosedWS = ["HR", "IT"];
for (i = 0; i < parentClosedWS.length; i++) {
$("#workShop option[value=" + parentClosedWS[i] + "]").prop('disabled', true);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="workShop" class="floatLabel" name="workshopsel">
<option value="" class="empty"></option>
<option value="Marketing">Marketing </option>
<option value="Sales">Sales</option>
<option value="IT">IT</option>
<option value="Graphic Design">Graphic Design</option>
<option value="HR">HR</option>
<option value="Supply chain">Supply chain</option>
<option value="Media production">Media production</option>
<option value="Development">Development</option>
<option value="TOT">TOT</option>
<option value="Project management">Project management</option>
</select>
I have 3 drop downs, but it can change. It is dynamic drop down
How can I get all selected values in those drop downs?
This is an explanation of my comment..
Run the snippet to check it in action
var combos = document.querySelectorAll('[name^="select"]');
function getvalues() {
// Clear shown data
console.clear();
for (var i=0; i < combos.length; i++) {
// Get selected option value
var option = combos[i].options[combos[i].selectedIndex];
// Show options
console.log(combos[i].name + " :: " + option.value + " : " + option.text);
}
}
<select name="select-1">
<option value="1" selected>First</option>
<option value="2">Second</option>
<option value="3">Third</option>
</select>
<select name="select-2">
<option value="1">First</option>
<option value="2" selected>Second</option>
<option value="3">Third</option>
</select>
<select name="select-3">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3" selected>Third</option>
</select>
<button onclick="getvalues()">Get values</button>
I have 2 drop-downs.
The drop-downs are dynamically populated.
What works: If name1 (drop-down1) is selected then email1 (drop-down2) is selected. (the js works).
What's not working: After selecting name1, if I select name4 email2 is displayed. What's happening is drop-down2 is going in numbered order rather than what's selected in drop-down1 order.
What should happen: The name selected should display the email that corresponds with that name. Example: name1 = email1, name2 = email2, name3 = email3, name4 = email4, name5 = email5, etc.
HTML
<select id="names" name="names" onchange="change(this.value);">
<option value="0"></option>
<option value="name1">name1</option>
<option value="name2">name2</option>
<option value="name3">name3</option>
<option value="name4">name4</option>
<option value="name5">name5</option>
</select>
<select id="emails" name="emails" onchange="change(this.value);">
<option value="0"></option>
<option value="email1">email1</option>
<option value="email2">email2</option>
<option value="email3">email3</option>
<option value="email4">email4</option>
<option value="email5">email5</option>
</select>
JS
function change(value) {
var names = document.getElementById('names');
var emails = document.getElementById('emails');
for (i = 0; i < names.length; i++) {
if (names.options[i].value == '0') {
emails.remove(i);
}
}
}
While you tagged a jquery this is a jquery solution
function change(el , value) {
var names = $('.select'),
selected_index = $(el).find('option:selected').index();
$('.select').not($(el)).find('option:eq('+selected_index+')').prop('selected',true);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="select" id="names" name="names" onchange="change(this , this.value);">
<option value="0"></option>
<option value="name1">name1</option>
<option value="name2">name2</option>
<option value="name3">name3</option>
<option value="name4">name4</option>
<option value="name5">name5</option>
</select>
<select class="select" id="emails" name="emails" onchange="change(this , this.value);">
<option value="0"></option>
<option value="email1">email1</option>
<option value="email2">email2</option>
<option value="email3">email3</option>
<option value="email4">email4</option>
<option value="email5">email5</option>
</select>
Steps:
1- don't forget to include jquery
2- give both of your <select> a class class="select"
3- your function will be change(el , value)
4- use the function like onchange="change(this , this.value);"
Try
function change(value){
var emails = document.getElementById('emails');
var emailValue = value.replace("name", "email");
for(var i = 0; i < emails.length; i++){
if(emails.options[i].value == emailValue){
emails.options[i].selected = true;
}
else {
emails.options[i].selected = false;
}
}
}
I think that should work.