I'm quite new to web-development, and have a problem which I can't solve. I have a table which has 3 items: car, color and motor type. Table example is here:
<table>
<tr>
<th>Car</th>
<th>Color</th>
<th>Motor type</th>
</tr>
<tr>
<td>Mercedes</td>
<td>Blue</td>
<td>Petrol</td>
</tr>
<tr>
<td>Mercedes</td>
<td>Red</td>
<td>Diesel</td>
</tr>
<tr>
<td>VW</td>
<td>Blue</td>
<td>Hybrid</td>
</tr>
<tr>
<td>VW</td>
<td>Yellow</td>
<td>Diesel</td>
</tr>
<tr>
<td>Alfa Romeo</td>
<td>Red</td>
<td>Diesel</td>
</tr>
<tr>
<td>Alfa Romeo</td>
<td>Green</td>
<td>Petrol</td>
</tr>
</table>
I want to add 3 dropdowns with checkboxes to filter selected items, one for car, one for color and one for motor type. Items in dropdown should be filled dynamically, based on the items in the table.
For example:
First dropdown will be consisted of 3 checkboxes: Mercedes, VW and Alfa Romeo
Second will have Blue, Red, Yellow and Green
and third one will have Petrol, Diesel and Hybrid
Also, when I select Mercedes, for example, Yellow and Green color should be hidden in second dropdown, and Hybrid should be hidden in third dropdown, since there aren't any Yellow/Green/Hybrid Mercedes.
Can someone please help with writing the appropriate JavaScript/jQuery file?
Thank you a lot.
i am write in php, you can modify this
this is only idea for you
//fetch from database
<input type="checkbox" value="Mercedes" onclick="car_fun(this.value)"> Mercedes
<input type="checkbox" value="VW" onclick="car_fun(this.value)"> VW
<input type="checkbox" value="Alfa Romeo" onclick="car_fun(this.value)"> Alfa Romeo
<select id="color">
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="Orange">Orange</option>
<option value="Blue">Blue</option>
</select>
<select id="type">
<option value="Petrol">Petrol</option>
<option value="Diesel">Diesel</option>
<option value="Hybrid">Hybrid</option>
</select>
<script>
function car_fun(car)
{
$.ajax({
url:// your url,
data:"$car_name="+car,
type:"post",
dataType:"json",
success:function(result)
{
$("#color").html(result.color);
$("#type").html(result.type);
}
});
}
</script>
fetch the value from database using the passed car value
First, set onchange to the checkboxs to track with is selected.
Then, in the onchange event, use the index of the items you want to hide items of dropdownlist:
document.getElementById('your dropdownlist id').options[index].style.display = 'none';
this is a example.
function changeItemsOfDropDown() {
var drop = document.getElementById("optionDrop");
for (var i = 0; i < drop.options.length; i++) {
if (drop.options[i].value == "Green" || drop.options[i].value == "Blue") {
drop.options[i].style.display = "none";
}
}
}
function fillItemsToDropDown() {
var drop = document.getElementById("optionDrop");
for(var i = 0; i < 5; i++) {
var option = document.createElement('option');
option.text = option.value = "test" + i;
drop.add(option);
}
}
<input type="checkbox" onchange="changeItemsOfDropDown()" >Click to hide items of Green and Blue</input>
<button type="checkbox" onchange="fillItemsToDropDown()" >Fill new options to dropdownlist</button>
<br>
<select id="optionDrop">
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="Orange">Orange</option>
<option value="Blue">Blue</option>
</select>
Related
TL;DR: I want to be able to make a selection using currently-active HTML select box, when I have multiple select boxes with the same name, but only one of them is to be active at any one time.
--
My question is this - I have multiple filename select boxes, that upon submit, always send the value of the last select box that is at the bottom of HTML that has filename name in HTTP Request. I want to find a way to send only the filename that is associated with the currently-active a_XX_row box, and not any others.
i.e. I select id of 40, I should only see the box that says "A-40 Designer and Specs", and not the 800 box. When I press submit I want POST['filename'] to have the "A-40 Designer and Specs", but instead I always get the "A-800 Designer E.xlsm", because it is the last select in the HTML file.
$('#modelid').on('change', function() {
if (this.value == 40)
$('.a_40_row').show();
else
$('.a_40_row').hide();
if (this.value == 800)
$('.a_800_row').show();
else
$('.a_800_row').hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form><table>
<tr>
<td>
<select name="id" id="modelid">
<option value="0">--select--
<option value="40">40
<option value="800">800
</select>
</td>
</tr>
<tr class="a_40_row" style="display: none;">
<td>Version</td>
<td>
<select name="filename">
<option selected>A-40 Designer and Specs B.xlsm</option>
<option>A-40 Designer and Specs A.xlsm</option>
</select>
</td>
</tr>
<tr class="a_800_row" style="display: none;">
<td>Version</td>
<td>
<select name="filename">
<option>A-800 Designer E.xlsm</option>
</select>
</td>
</tr>
<tr>
<td><input type="submit"></td>
</tr>
</table></form>
don't show/hide selects form.
you just need to update the second select when the first is changed
the way to do that:
const
myForm = document.forms['my-form']
, filenames =
[ { model: '40', cod: 'A-40-B', fn:'A-40 Designer and Specs B.xlsm' }
, { model: '40', cod: 'A-40-A', fn:'A-40 Designer and Specs A.xlsm' }
, { model: '800', cod: 'A-800-E', fn:'A-800 Designer E.xlsm' }
]
myForm.modelid.onchange = () =>
{
myForm.filename.innerHTML = ''
filenames
.filter(x=>x.model===myForm.modelid.value)
.forEach( filename=>
{
myForm.filename.add( new Option(filename.fn,filename.cod))
}
)
}
select,
button {
display : block;
float : left;
clear : left;
margin : .3em;
}
select {
min-width : 8em;
padding : 0 .3em;
}
<form name="my-form">
<select name="modelid" >
<option value="" selected disable >--select--</option>
<option value="40" > 40 </option>
<option value="800" > 800 </option>
</select>
<select name="filename"></select>
<button type="submit">submit</button>
</form>
Two options,
Enable/disable the element as you show it.
Populate one field with what you need.
Option 1 :
$('#modelid').on('change', function() {
//Set visibility
$('.a_40_row').toggle(this.value == 40);
//Toggle disabled
$('.a_40_row [name=filename]').prop("disabled", this.value != 40);
$('.a_800_row').toggle(this.value == 800)
$('.a_800_row [name=filename]').prop("disabled", this.value != 800);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form><table>
<tr>
<td>
<select name="id" id="modelid">
<option value="0">--select--</option>
<option value="40">40</option>
<option value="800">800</option>
</select>
</td>
</tr>
<tr class="a_40_row" style="display: none;">
<td>Version</td>
<td>
<select name="filename" disabled>
<option selected>A-40 Designer and Specs B.xlsm</option>
<option>A-40 Designer and Specs A.xlsm</option>
</select>
</td>
</tr>
<tr class="a_800_row" style="display: none;">
<td>Version</td>
<td>
<select name="filename" disbled>
<option>A-800 Designer E.xlsm</option>
</select>
</td>
</tr>
<tr>
<td><input type="submit"></td>
</tr>
</table></form>
Option 2 : - This uses HTML 5 which has issues in IE 10 and less
$('#modelid').on('change', function() {
$(".row").show();
var selVal = $(this).val();
//Go through the options
$("[name=filename] option").each(function(){
//Dont use jquerys data here, it will convert to a number when it can
//Get array of values where can display from the data attribute
var arrDisplay = this.dataset.display.split(",");
//Add the hidden property if not contained in array -- wont work in IE 10 and older
$(this).prop("hidden", !arrDisplay.includes(selVal));
//Set a default
$(this).prop("selected", $(this).data("optiondefault") && !arrDisplay.includes(selVal) )
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form><table>
<tr>
<td>
<select name="id" id="modelid">
<option value="0">--select--</option>
<option value="40">40</option>
<option value="800">800</option>
</select>
</td>
</tr>
<tr class="row" style="display: none;">
<td>Version</td>
<td>
<select name="filename">
<option data-display="40" data-optiondefault="true">A-40 Designer and Specs B.xlsm</option>
<option data-display="40">A-40 Designer and Specs A.xlsm</option>
<option data-display="800" data-optiondefault="true">A-800 Designer E.xlsm</option>
<option data-display="40,800">Hybrid</option>
</select>
</td>
</tr>
<tr>
<td><input type="submit"></td>
</tr>
</table></form>
In a table, how to loop through all dropdowns text & id in a table's col, and save them in array. So that I can disable previously selected options
Once an option is selected, I do not want it to be available again. How to check the selected text of previously selected options in the table set that option to disabled on all other dropdowns in the page.
(this question is different from other SO questions since its disabling after checking both selected text & selected value inside a table and needs to target the dropdown in the specified column)
var allSelectedValuesArray = array();
allSelectedValuesArray.push($("#tblVersions .Model option:selected").text());
var rows = $("body tr",$("#tblVersions")).map(function() {
return [$("td:eq(0) input:checkbox:checked",this).map(function() {
return this.innerHTML;
}).get()];
}).get();
<table id="tblversions">
<tbody id="body">
<tr class="rowcss">
<td>
<select class="Manufacturer">
<option value="1">Toyota </option>
<option value="2">Honda</option>
<option value="3">BMW</option>
</select>
</td>
<td>
<select class="Model">
<!-- If user selects Honda my Ajax populates Honda Models/Cars like below-->
<option value="1">Accord</option>
<option value="2">Toyota 2</option>
<option value="3">Honda 3</option>
</select>
</td>
</tr>
<tr class="rowcss">
<td>
<select class="Manufacturer">
<option value="1">Toyota </option>
<option value="2">Honda</option>
<option value="3">BMW</option>
</select>
</td>
<td>
<select class="Model">
<!-- If user selects BMW my Ajax populates BMW models Cars like below-->
<option value="1">X5 Suv</option>
<option value="2">318 series Cheap</option>
<option value="3">540i too expensive!</option>
</select>
</td>
</tr>
</tbody>
</table>
I didn't understand the second part of your question, but if you want to get text and values for all dropdowns you could do something like this.
// Called when any of the dropdowns change
( "#tblversions" ).change(function() {
var allSelectedValuesArray = [];
// Search for all selects in the #tblversions
$("#tblversions select option:selected").each(function() {
// for each one, push it into the array
allSelectedValuesArray.push({text:$(this).text(), value:this.value});
});
});
This creates an array of objects in the format {text:"sometext",value:"somevalue"} for each of the dropdowns in the table.
Is there any way to find the text content of a td and then make that text the first line or option in a select drop down?
<table class="options">
<tbody>
<tr>
<td><b>Colour:</b></td>
<td>
<select>
<option selected="" value="">Select:</option>
<option value="1">Black</option>
<option value="2">White</option>
</select>
</td>
</tr>
</tbody>
</table>
The first td content (Colour:) needs to go in place of the first option (Select:), basically. I don't have full control over the select list myself so I'm having to try doing this dynamically. Trying to save on space. Ideally I'd like to remove the td as well after moving the content.
Just get the caption from the previous cell and put it to the first option. Check it out here: https://jsfiddle.net/w07vg0ef/
Try this:
// do for all selects on the page
$('select').each(function (index, element) {
// store the select
var select = $(element)
// get the caption from the previous cell
var caption = select.parent().prev('td').text()
// put the caption to the first option
select.find('option').first().html(caption)
})
$('select').prepend('<option selected=selected>'+$('select').closest('tr').find('td:nth-child(1)').text()+'</option>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="options">
<tbody>
<tr>
<td><b>Colour:</b>
</td>
<td>
<select>
<option selected="" value="">Select:</option>
<option value="1">Black</option>
<option value="2">White</option>
</select>
</td>
</tr>
</tbody>
</table>
try this
If you're looking to do it only by JavaScript then take a look at this:
Add option as the first value but as a new value:
var getColor = document.getElementsByTagName("td")[0];
var selectedColor = getColor.getElementsByTagName("b")[0].innerHTML;
var select = document.getElementsByTagName("select")[0];
var option = document.createElement("option");
option.text = selectedColor;
select.add(option, select[0]);
<table class="options">
<tbody>
<tr>
<td><b>Color:</b></td>
<td>
<select>
<option selected="" value="">Select:</option>
<option value="1">Black</option>
<option value="2">White</option>
</select>
</td>
</tr>
</tbody>
</table>
Add option as a replace value of the current first value:
var getColor = document.getElementsByTagName("td")[0];
var selectedColor = getColor.getElementsByTagName("b")[0].innerHTML;
var select = document.getElementsByTagName("select")[0];
var option = select.options[0];
option.innerHTML = selectedColor;
<table class="options">
<tbody>
<tr>
<td><b>Color:</b></td>
<td>
<select>
<option selected="" value="">Select:</option>
<option value="1">Black</option>
<option value="2">White</option>
</select>
</td>
</tr>
</tbody>
</table>
Here's a quick pure javascript solution. If possible, I would add a class to the TD so you could target it better or something like that.
var firstTD = document.getElementsByClassName('options')[0].getElementsByTagName('td')[0];
var text = firstTD.innerHTML;
var selectBox = document.getElementsByTagName('select')[0];
var option = document.createElement('option');
option.setAttribute('value', '');
option.innerHTML = text;
selectBoxFirstChild = document.getElementsByTagName('select')[0].children[0];
selectBox.insertBefore(option, selectBoxFirstChild);
What I am trying to accomplish is that when a user selects a value from a dropdown box the corresponding row will change to a different color depending on the option selected.
So far I have the rows changing colors just fine but if the user changes their mind and wants to select a new option the row sometimes doesnt change colors. The change is sporadic and sometimes the color will change again sometimes it will not.
Simplified HTML table:
<table class="table" id="myTable">
<tbody>
<tr>
<td>1.</td>
<td>
<select name="queue" class="queue-drop">
<option></option>
<option class="move">Move</option>
<option class="add">Add</option>
<option class="change">Change</option>
<option class="cancel">Cancel</option>
<option class="swap">Swap</option>
</select>
</td>
</tr>
<tr>
<td>2.</td>
<td>
<select name="queue" class="queue-drop">
<option></option>
<option class="move">Move</option>
<option class="add">Add</option>
<option class="change">Change</option>
<option class="cancel">Cancel</option>
<option class="swap">Swap</option>
</select>
</td>
</tr>
</tbody>
</table>
JQuery:
$(document).ready(function(){
$('.queue-drop').change(function(){
var selectedVal = $(this).find("option:selected").text();
if (selectedVal == 'Move') {
$(this).closest('tr').addClass("move-row")
}
else if (selectedVal == "Add") {
$(this).closest('tr').addClass("add-row")
}
else if (selectedVal == "Cancel") {
$(this).closest('tr').addClass("cancel-row")
}
else if (selectedVal == "Change") {
$(this).closest('tr').addClass('change-row')
}
else if (selectedVal == "Swap") {
$(this).closest('tr').addClass('swap-row')
}
});
});
JS Fiddle: http://jsfiddle.net/exx2q/
I am somewhat new to JS and JQuery any help would be appreciated.
You can use .removeClass(), to clear class and then apply the new one
$(this).closest('tr').removeClass().addClass("move-row")
DEMO
I'm trying to make an Unnoficial character creation tester for the popular game Mount & Blade. The script should in theory, depending on the options chosen, determine the characters stats as it would do in game.
At the moment when I choose male/female in the select box none of the specified fields disappear. What have I done wrong?
When the stats are changed I want to automatically display them in a tabular form, would that require me to give an id to each td or could I somehow reference which cell so like the third cell from the left two cells down would be table1(3,2) or is that too difficult/impossible?
Here is the Javascript:
// Base Stats -
var sGender; // Male or Female
var iAgi = 6;
var iStr = 5;
var iInt = 5;
var iCha = 5;
$("#selGender").change(function() {
var mnf = $(this).val();
sGender = parseInt(mnf);
if (sGender = 1){
// Show/hide options
$('#fnomad').hide();
$('#fnoble').hide();
$('#fsquire').hide();
$('#mnomad').show();
$('#mnoble').show();
$('#msquire').show();
iAgi++;
iInt++;
this.disabled=true;
} else {
$('#mnomad').hide();
$('#mnoble').hide();
$('#msquire').hide();
$('#fnomad').show();
$('#fnoble').show();
$('#fsquire').show();
iStr++;
iCha++;
this.disabled=true;
}
}
Here is the HTML
<legend>Choose your background:</legend>
<label>Gender</label>
<select id="selGender">
<option value="1" >Male</option>
<option value="2">Female</option>
</select>
<label>Your father was ...</label>
<select id="selFather">
<option id="fnoble" value="fnoble">a Noble</option>
<option id="mnoble" value="mnoble">a Noble</option>
<option value="merchant">a Merchant</option>
<option value="vetwarrior">a Veteran Warrior</option>
<option value="thief">a Thief</option>
<option id="fnomad" value="fnomad">a Nomad</option>
<option id="mnomad" value="mnomad">a Nomad</option>
</select>
EDIT: Also, I've made sure I've linked to the jQuery file in the header.
<script type="text/javascript" src="jquery.min.js"></script>
EDIT2: this is the section where mSquire and fSquire are:
<label>When you grew to a young adult, you became a ...</label>
<select id="selAdult">
<option id="msquire" value="msquire">a Squire</option>
<option id="fsquire" value="fsquire">a Lady in waiting</option>
<option value="troubadour">Troubadour</option>
<option value="student">Student</option>
<option value="peddle">Peddler</option>
<option value="poacher">Poacher</option>
</select>
See http://jsfiddle.net/KvNVN/
Instead of showing/hiding each element, you can add classes to them:
<select id="selFather">
<option id="fnoble" value="fnoble" class="f">a Noble (f)</option>
<option id="mnoble" value="mnoble" class="m">a Noble (m)</option>
<option value="merchant">a Merchant</option>
<option value="vetwarrior">a Veteran Warrior</option>
<option value="thief">a Thief</option>
<option id="fnomad" value="fnomad" class="f">a Nomad (f)</option>
<option id="mnomad" value="mnomad" class="m">a Nomad (m)</option>
</select>
And then
$('.f').hide();
$('.m').show();
You could also create a CSS stylesheet with: .f{display:none} .m{display:block;}
Your code has a problem: if you have ...
<select id="selGender">
<option value="1" >Male</option>
<option value="2">Female</option>
</select>
... the default selected value is "Male", so if you select it it doesn't trigger onchange event. You can use
<select id="selGender">
<option selected="selected" disabled="disabled">Select gender:</option>
<option value="1" >Male</option>
<option value="2">Female</option>
</select>
Moreover, you have
if (sGender = 1)
You should use
if (sGender == 1)
because you are comparing, not setting values.
About your other question (navigate through a table), you can create a JavaScript function which does that. But I don't understand very well what you want with "the third cell from the left two cells down".
Edit:
If I understand well you have a table like
<table id="table">
<tbody>
<tr>
<td>Skill 1</td>
<td>Skill 2</td>
<td>Skill 3</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
</tr>
</tbody>
</table>
And you want
table(1,1)=Skill 1 cell
table(1,2)=Value 1 cell
table(2,1)=Skill 2 cell
table(2,2)=Value 2 cell
...
Then,
function table(col,row){
return document.getElementById('table').tBodies[0].getElementsByTagName('tr')[row-1].getElementsByTagName('td')[col-1];
}
See it here: http://jsfiddle.net/UGHHd/