I'm developing a decision tree drop-down wherein the selection may change based on the user's decision.
I was able to display the correct results using a loop with the help of selectedIndex if no changes of selection is made but when I change it to other selection that's the time I get an issue
I already tried clearing the stored array by doing this result = [] also this result = 0 but after that it wont recapture the selected dropdown even though I created a separate button for displaying result and clearing result.
Sample Scenario:
I choose A on question 1 then A-1 on question 2 when I click on Display result it will display the correct selection. The issue happens when I change my selection into B on question 1 and B-1 on question 2 because the result still includes the previous selection which is A-1 value even though I created a clear button which clear out the value of the array. The correct answer on that should be B-Value and B-1-Value only.
//THIS IS THE CODE TO CLEAR THE RESULT
function clearResult() {
var result = []
for (var x = 0; x < inputs.length; x++) {
if (inputs[x].selectedIndex > 0) {
inputs[x] = 0;
document.getElementById("demo").innerHTML = '';
}
}
return console.log(inputs);
}
//THIS IS THE CODE TO DISPLAY THE RESULT
var inputs = form1.elements;
function displayResult() {
var result = [];
for (var x = 0; x < inputs.length; x++) {
if (inputs[x].selectedIndex) {
result += inputs[x].value + "</br>";
document.getElementById("demo").innerHTML = result;
}
}
return false;
}
//PLEASE IGNORE THE CODE BELOW
//FOR HIDING DROPDOWN
var base = {
productFilterSetup: function() {
$('.productFilter').each(
function() {
var tmp = new base.filterGroup(this);
tmp.setup();
});
},
filterGroup: function(filter_group) {
var me = this;
me.target_element = filter_group;
me.active_element_index = 0;
me.setup = function() {
$(filter_group).find('option[type=dropdown]').bind('click', function() {
me.update(this);
});
};
me.update = function(target_dropdown) {
var div = $(me.target_element).find('div'),
len = div.length,
i = 0,
j = 0,
dropdowns,
dropdowns_len,
options = [],
options_buffer = '',
num_of_steps = 0;
for (i = 1; i <= num_of_steps + 1; i += 1) {
if ($('div.step' + i).length > 0) {
num_of_steps += 1;
}
}
for (i = 0; i < num_of_steps; i += 1) {
if ($(target_dropdown).parents('div.step' + (i + 1)).length > 0) {
for (j = i; j < num_of_steps; j += 1) {
$('div.step' + (j + 2) + ' option[type=dropdown]').attr('checked', false);
}
}
}
for (i = 0; i < len; i += 1) {
dropdowns = $(div[i]).find('option[type=dropdown]');
dropdowns_len = dropdowns.length;
for (j = 0; j < dropdowns_len; j += 1) {
if ($(dropdowns[j]).is(':checked')) {
options.push(j + 1);
}
}
}
div.addClass('hide');
$('div.option0').removeClass('hide');
for (i = 0; i < options.length; i += 1) {
options_buffer += options[i];
$('div.option' + options_buffer).removeClass('hide');
}
};
}
};
$(
function() {
base.productFilterSetup();
});
//]]>
.hide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#" class="productFilter" name="form1" target='sendinfo' id='infoform' onsubmit='return displayResult()'>
<!-- Group 1 -->
<div class="step1 option0">
<label for="group_1">Qustion-1</label>
<select>
<option disabled selected class="drpdow">Select Option</option>
<option id="1" name="group_1" class="drpdow" type="dropdown" value="-A-Value" />
<label for="1">A</label>
<option id="2" name="group_1" class="drpdow" type="dropdown" value="-B-Value" />
<label for="2">B</label>
</select>
</div>
<!-- Group 2 -->
<div class="hide step2 option1">
<label for="group_2">Qustion-2</label>
<select>
<option disabled selected class="drpdow">Select Option</option>
<option id="1_1" name="group_2" class="drpdow" type="dropdown" value="-A-1-Value" />
<label for="1_1">A-1</label>
<option id="1_2" name="group_2" class="drpdow" type="dropdown" value="-A-2-Value" />
<label for="1_2">A-2</label>
</select>
</div>
<div class="hide step2 option2">
<label for="group_2">Question-2</label>
<select>
<option disabled selected class="drpdow">Select Option</option>
<option id="2_1" name="group_2" class="drpdow" type="dropdown" value="-B-1-Value" />
<label for="2_1">B-1</label>
<option id="2_2" name="group_2" class="drpdow" type="dropdown" value="-B-2-Value" />
<label for="2_2">B-2</label>
</select>
</div>
<!-- End of form -->
<p class="pResult" id="demo">
Result will display here
</p>
<p id="demo1"></p>
<input class="copyData" id="btn" type='submit' value='Display result' />
<button class="copyData" id="btnShow" type="button" onclick="clearResult()">Clear result</button>
</form>
Related
I use a first select dropdown to choose how many age selection elements to generate. For example:
would cause 4 elements to be generated. Say I then choose some values.
If I then change the number of selected elements, I want to keep the values in any existing elements. For example, if I change the number of elements to 6, I want 6 elements with the first 4 keeping their selected values.
And I would like the new selects to appear horizontally
<label class="col-sm-1 control-label">Kids:</label>
<%--
<input type="text" class="form-control" name="Minors" value="<%=(package!= null && package.request!=null)? package.request.Minors :0 %>"/>
</div>--%>
<div class="col-sm-2">
<select class="chosen-select" style="width: 350px;" name="Minors" id="cbo-select">
<%for (int i = 0; i <= maxKids; i++)
{ %>
<option value="<%=i %>" name="Minors"><%=i%></option>
Minors = i;
<% } %>
</select>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-sm-12" id="area">
</div>
**//////////// javascript
function selectedElementChanged() {
<%var ageKids = (int) ViewData["ageKids"];%>
var ageKids = '<%=ageKids%>';
//$(".chosen-select").area.empty();
//$(".chosen-select").area.append('<select style="width: 20%;" name="KidAges" id="auto-select" class="chosen-select">' +
// '</select>');
var selectedValue = $("#cbo-select").val();
$("#area").empty();
if (parseInt(selectedValue)) {
for (var i = 0; i < selectedValue; i++) {
$("#area")
.append('<select class="form-control chosen-select" style="width: 20%;" name="KidAges" id="auto-select">' +
'</select>');
}
var i = 0;
if (i >= 0) {
$("select[name='KidAges']")
.append('<option value ="0" name = "KidAges[0]" > < 1 </option></br>');
}
for (i = 1; i <= ageKids; i++) {
$("select[name='KidAges']").append('<option value=' + i + ' name="KidAges[' + i + ']" > ' + i + '</option>');
}
}
}
To maintain the existing dropdown values you must either store/restore values when repopulating the list or incrementally add/remove controls. The latter seems more efficient.
var desiredCount = $("#cbo-select").val();
desiredCount = parseInt(desiredCount);
var area = $("#area");
var controls = area.children();
if (desiredCount) {
var currentCount = controls.length;
if (desiredCount < currentCount) {
controls.slice(desiredCount).remove();
} else {
for (var ii = currentCount; ii < desiredCount; ++ii) {
area.append('<select class="form-control chosen-select" style="width: 20%;" name="KidAges" id="auto-select">' +
'</select>');
}
}
} else {
area.empty();
}
I have customized select option menu by JavaScript but there is a problem, this code is not working when option tag is disabled or selected as true.
I want this solution by JavaScript.
<form class="wrapper" action="index.html">
<ul>
<li>
<div class="magneto-combobox">
<select class="combo-box" data-element="combobox">
<option value="apple" disabled>apple</option>
<option value="mango">mango<option>
<option value="banana" >banana<option>
</select>
</div>
</li>
<lil>
<input type="submit" value="submit"/>
</lil>
</ul>
</form>
<script>
var select = document.getElementsByTagName('select');
var customselect = [];
var menu = [];
var items = [];
for(var i = 0 ; i < select.length ; i++) {
if(select[i].getAttribute("data-element") == "combobox") {
option = select[i].getElementsByTagName('option');
menu[i] = document.createElement('ul');
customselect[i] = document.createElement('div');
customselect[i].className = select[i].className;
select[i].parentNode.appendChild(customselect[i]);
select[i].parentNode.appendChild(menu[i]);
for(var j = 0 ; j < option.length; j++) {
items[j] = document.createElement('li');
menu[i].appendChild(items[j]);
menu[i].childNodes[j].innerText = option[j].value;
menu[i].previousSibling.innerText = option[0].value;
option[j].selected = true;
if(!select[i].getAttribute('disabled')) {
items[j].onmousedown = itemSelected;
}
}
}
}
function itemSelected() {
var prevsibling = this.parentNode.previousSibling;
var firstchild = this.parentNode.parentNode.firstChild;
var option = firstchild.getElementsByTagName('option');
prevsibling.innerText = this.innerText;
firstchild.value = prevsibling.innerText;
document.getElementById('demo').innerText = firstchild.value;
}
</script>
Your <option> tags are not correctly closed with a matching </option> tag.
You code should be:
<option value="apple" disabled>apple</option>
<option value="mango">mango</option>
<option value="banana">banana</option>
Now I am using this code to unselect the selected values of dropdown but its not working
var Diag = document.getElementById('<%=selDiag.ClientID%>');
var diag1 = "";
var diag2 = "";
var diag3 = "";
var diag4 = "";
var options = Diag.getElementsByTagName('option');
for (var i = 0, len = options.length; i < len; i++) {
options[i].selected == false;
}
'==' is a comparison operation, you need to use '='
var Diag = document.getElementById('tst');
var options = Diag.getElementsByTagName('option');
for (var i = 0, len = options.length; i < len; i++) {
options[i].selected = false;
}
<select id="tst" multiple>
<option value="volvo" selected>Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi" selected>Audi</option>
</select>
set the value="" or "0" for item you want as default selected item..
here is an example..
<select id="To_Year" class="form-control" style="color: black; height: 36px; margin: 4px; text-align: center;">
<%Response.Write("<option value=''>To Year</option>");
for (Int32 cnt = 2000; cnt <= (DateTime.Now.Year) + 5; cnt++)
{
Response.Write("<option value='" + cnt + "'>" + cnt + "</option>");
}
%>
</select>
And simply call them in you script as following..
$("#To_Year").val("");
OR
document.getElementById('<%=To_Year.ClientID%>').val("");
Do you know how to transfer data from listbox to another listbox ?
I have made one but it didn't stop submitting although I use a function to stop it from submitting .
You can look at my previous problem in this section
cancel-submit-code-not-working
The problem is not yet been solved even though there's few people helped me and I tried all their suggestions and recommendations but I always get the same result so I decided to ask you guys if there is someone who can do this using a javascript .
I tried to use one but it's not working because the function is for and I'm using LISTBOX so I think that's the reason why since I'm new to ASP.net C# javascript I can't change the code because ... it's not English :-D
hope you can change the code for me?
Here's the code for javascript
<script type="text/javascript">
function Listbox_transfer(Listbox_Orig, Listbox_Move) {
var moved = new Array();
var count = 0;
for (var item = 0; item < Listbox_Move.options.length; item++)
{
if (Listbox_Move.options[item].selected) {
var temp = document.createElement("OPTION");
temp.text = Listbox_Move.options[item].text;
temp.value = Listbox_Move.options[item].value;
var index = 0;
var currOpn;
while (index < Listbox_Orig.options.length && temp.text > Listbox_Orig.options[index].text)
{
index++;
}
if (index < Listbox_Orig.options.length)
{
currOpn = Listbox_Orig.options[index];
}
else
{
currOpn = null;
}
try
{
Listbox_Orig.Listbox_transfer(temp, currOpn);
}
catch (ex)
{
Listbox_Orig.Listbox_transfer(temp, index);
}
moved[count] = Listbox_Move.options[item].value;
count++;
}
}
if (moved.length > 0)
{
remove(Listbox_Move, moved);
}
}
function remove(Listbox_OrigRemoveFrom, items)
{
for (element in items) {
var index = 0;
while (index < Listbox_OrigRemoveFrom.options.length &&
Listbox_OrigRemoveFrom.options[index].value != items[element])
{
index++;
}
Listbox_OrigRemoveFrom.remove(index);
}
}
function addAll(Listbox_Orig, Listbox_Move)
{
var moved = new Array();
var count = 0;
for (var item = 0; item < Listbox_Move.options.length; item++)
{
var temp = document.createElement("OPTION");
temp.text = Listbox_Move.options[item].text;
temp.value = Listbox_Move.options[item].value;
var index = 0;
var currOpn;
while (index < Listbox_Orig.options.length && temp.text > Listbox_Orig.options[index].text) {
index++;
}
if (index < Listbox_Orig.options.length) {
currOpn = Listbox_Orig.options[index];
}
else {
currOpn = null;
}
try {
Listbox_Orig.Listbox_transfer(temp, currOpn);
}
catch (ex) {
Listbox_Orig.Listbox_transfer(temp, index);
}
}
removeAll(Listbox_Move);
}
function removeAll(list) {
for (var count = list.options.length; count >= 0; count--) {
list.remove(count);
}
}
function selectAll(Listbox_OrigSelect1, Listbox_OrigSelect2) {
for (var count = 0; count < Listbox_OrigSelect1.options.length; count++) {
Listbox_OrigSelect1.options[count].selected = true;
}
for (var count = 0; count < Listbox_OrigSelect2.options.length; count++) {
Listbox_OrigSelect2.options[count].selected = true;
}
}
I'm using input buttons
<input id="toTheRightButton" type="button" value=">>>" class="button button-primary" onclick="Listbox_transfer(this.form.ListBox3, this.form.ListBox2)"/>
Now here's the whole code of the demo that I tried to copy
<html>
<head>
<title>Lisbox Demo</title>
<script type="text/javascript" src="Listbox.js"></script>
</head>
<body>
<form method="post">
<table style="text-align: center" border="0">
<tr><td><strong>List 1:</strong><br/>
<select size="15" name="list1[]" id="list1" style="width: 350px" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select></td>
<td>
<br/>
<input type="button" value=">>" onClick="add(this.form.list2, this.form.list1)"/>
<br/><br/>
<input type="button" value="<<" onClick="add(this.form.list1, this.form.list2)"/>
<br/><br/>
<input type="button" value="All >>" onClick="addAll(this.form.list2, this.form.list1)"/>
<br/><br/>
<input type="button" value="All <<" onClick="addAll(this.form.list1, this.form.list2)"/>
</td>
<td><strong>List 2:</strong><br/>
<select size="15" name="list2[]" id="list2" style="width: 350px" multiple="multiple">
</select></td></tr>
</table>
<p> </p>
<p><select name="list3" size="14" multiple>
<option value="0">selection1</option></select> </p>
</form>
</body>
As you can see the code is for option list .. not for listbox for asp.net :-(
hope you can help me thank you .
Following function is for single item. you can modify it for all items and also make it single by passing listbox id as parameter:
function Add() {
var selectedItem = $("#lbAvailable > option:selected");
if (selectedItem.length > 0) {
selectedItem.remove().appendTo("#lbSelected");
$("#lbAvailable option:first-child").attr("selected", true);
$("#lbSelected option:last-child").attr("selected", true);
}
else {
alert("Select item");
}
}
function Remove() {
var selectedItem = $("#lbSelected > option:selected");
if (selectedItem.length > 0) {
selectedItem.remove().appendTo("#lbAvailable");
$("#lbAvailable option:first-child").attr("selected", true);
$("#lbSelected option:last-child").attr("selected", true);
}
else {
alert("Select item");
}
}
function AddAll() {
$("#lbAvailable option").each(function () {
this.remove().appendTo("#lbSelected");
});
}
function RemoveAll() {
$("#lbSelected option").each(function () {
this.remove().appendTo("#lbAvailable");
});
}
Ok what I have here is an array that is 6x6 with numbers. The part that I'm having issues with is I need to use an onchange in the drop down list to only choose the column that is selected. So if I select column 5 it will only display the numbers in that column. I have spent sometime on line looking for a way to do to this so I'm turning to everyone here. I am only using java script to create this too
<script type="text/javascript">
// create a var for a 2-D array (6x6)
var afNumbers = new Array(6)
var i
var j
for (i = 0; i <= 5; i++)
afNumbers[i] = new Array(6)
//fill the array by using a nested for loop
//loop through each row
for (i = 0; i <= 5; i++)
{
//loop through each item in those row
for (j = 0; j <= 5 ; j++) {
afNumbers[i][j] = i + j
}
}
//function to print the array in the text area
function vPrint() {
var strOut = ""
for (i = 0; i <= 5; i++)
{
//loop through each item in those row
for (j = 0; j <= 5 ; j++)
{
strOut += afNumbers[i][j] + "\t"
}
strOut += "\r"
}
document.getElementById('taOut').value = strOut
}
function vDiagonal() {
var strOut = ""
for (i = 0; i <= 5; i++) {
//loop through each item in those row
for (j = 0; j <= 5 ; j++) {
if (i == j)
strOut += afNumbers[i][j] + "\t"
else strOut += "" + "\t"
}
strOut += "\r"
}
document.getElementById('taOut').value = strOut
function vColumn()
{
if (document.getElementById('PrintMenu').value == "1")
{
document.getElementById('').innerHTML = afNumbers[j] + strOut
}
}
}
</script>
</head>
<body>
<form id="frm2DArray" style="text-align:center">
<h2>Two Dimensional Arrays</h2>
<input type="button" id="btnPrint" value="Print Array" onclick="vPrint()"/><br /><br />
<input type="button" id="btnTranspose" value="Print Transpose" /><br /><br />
<input type="button" id="btnDiagonal" value="Print Diagonal" onclick="vDiagonal()" />
<h3>Print</h3>
<select id="PrintMenu" onchange="vColumn()">
<option value="1">Column 1</option>
<option value="2">Column 2</option>
<option value="3">Column 3</option>
<option value="4">Column 4</option>
<option value="5">Column 5</option>
</select>
<br />
<textarea id="taOut" rows="40" cols="80"></textarea>
</form>
</body>
</html>
First off I'm noticing a disconcerting lack of semicolons in your code. Put those after your statements!
You can get the value of the printmenu and store in in a variable.
var col = document.getElementById('PrintMenu').value;
From there you can loop across the array with that value.
afNumbers.forEach(function(entry) {
document.write(entry[col]);
});
That should spit out each of the numbers in the column.