Javascript Help about "document.getElementById" please - javascript

Here's my code:
<html>
<head>
<script>
function changeDate(option) {
var selectList = document.getElementById("catProdAttributeItem");
if (option == 0) {
selectList.selectedIndex++;
} else if (option == 1 && selectList.selectedIndex > 0) {
selectList.selectedIndex--;
}
}
</script>
</head>
<body>
<img src="img1.jpg" onclick="changeDate(0)">
<img src="img2.jpg" onclick="changeDate(1)">
<select id="pa_colour" name="attribute_pa_colour">
<option value="">Choose an option…</option>
<option value="black" class="active">Black</option>
<option value="blue" class="active">Blue</option>
<option value="red" class="active">Red</option>
<option value="white" class="active">White</option>
</select>
<div id="catProdAttributeItem">
<select>
<option id="1">One</option>
<option id="2">Two</option>
<option id="3">three</option>
<option id="4">Four</option>
</select>
</div>
</body>
</html>
In this code what I want to do is when the user clicks an image, the select option value will change.
If the <select id="list"> select has an id it will work fine, but in my case, the select option has no id, but before the select there is a class "catProdAttributeItem".
How do I make it work with document.getElementById and select option?

Select element is the child of Div, so you need to access the child element. For that,use following :
var selectList = document.getElementById("catProdAttributeItem").children[0];
Here is the working demo : http://jsfiddle.net/spdX3/

Since the select element is within the catProdAttributeItem div, you can select it using the childNodes property
var selectList = document.getElementById("catProdAttributeItem").childNodes[0];
Rest of the code should work as it is.

Related

How to reset default value in an select based on previous select tag?

I have two select options :
<select id="Living things">
<option>Choose Any</option>
<option>Animals</option>
<option>Plants</option>
</select>
<select id="Compare">
<option>Any</option>
<option>less</option>
<option>greater</option>
</select>
Consider the first options from both the drop downs are default. Now imagine I selected 'Animals' from first and 'less' from second. Now if I change the first to 'Plants' then the second list should be reset.i.e,
<option>Any</option>
<option>less</option>
<option>greater</option>
Please help in this.Thank You.
<select id="livingThings" onchange="reset();">
<option>Choose Any</option>
<option>Animals</option>
<option>Plants</option>
</select>
<select id="compare">
<option>Any</option>
<option>less</option>
<option>greater</option>
</select>
<script src="test.js"></script>
livingThings = document.getElementById('livingThings');
compare =document.getElementById('compare');
function reset(){
if (livingThings.selectedIndex != 0){
compare.selectedIndex = 0;
}
}
You can add an event listener for the first select element whenver it changes then reset the value of the second select element to its default, note that IDs can not have white spaces, I have added a dash to it
document.querySelector("#Living-things").onchange = function() {
let select = document.querySelector("#Compare");
select.value = select.children[0].value;
}
<select id="Living-things">
<option>Choose Any</option>
<option>Animals</option>
<option>Plants</option>
</select>
<select id="Compare">
<option>Any</option>
<option>less</option>
<option>greater</option>
</select>

Get div html with select value of dynamically created select in jquery

I dynamically created a div with select options in jQuery. Here's a sample.
<div id="myDiv">
<select id="mySelect">
<option selected value="0">A</option>
<option value="1">B</option>
<option value="2">C</option>
<option value="3">D</option>
</select>
</div>
0 is the default selected value.
When I get html of the div like this $("#myDiv").html(), it gets the below.
<div id="myDiv">
<select id="mySelect">
<option selected value="0">A</option>
<option value="1">B</option>
<option value="2">C</option>
<option value="3">D</option>
</select>
</div>
It's the same as the above code which is normal.
However, when I change the selected value to 2, $("#myDiv").html() is still getting same code. 0 is still the selected value.
How can I get the html of the div, with the dynamically changed value?
You can do this :
$('#yourSelect option:selected').val()
Maybe like this:
function create_select(){
var select=$('<select/>').attr('id','mySelect');
var option0=$('<option/>').val(0).text('A').attr('selected', true);
select.append(option0);
var option1=$('<option/>').val(1).text('B');
select.append(option1);
var option2=$('<option/>').val(2).text('C');
select.append(option2);
var option3=$('<option/>').val(3).text('D');
select.append(option3);
$('#myDiv').empty().append(select);
}
function change_select_value(_new_val){
$('#mySelect option').removeAttr('selected');
$('#mySelect').val(_new_val).change();
}
$(document).on('change', '#mySelect', function(){ //conctruction for Dynamically created element
alert('change value to =>'+this.value); //or $(this).val();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="myDiv"></div>
<input type="button" value="Create Select" onclick="create_select();" /></br>
<input type="button" value="Set option C (value=2)" onclick="change_select_value(2);" /></br>
$('#myDiv').find("#mySelect").change(function () {
alert($("#mySelect option:selected").text());
alert($("#mySelect option:selected").val());
});

Link two combo boxes Javascript/HTML

I'm new to Javascript and I'm trying to link two comboboxes ! In the first combo box I have the names of some states in greece and in the other the cities ! In the second I have all the cities in Greece and I want when I select a state from the first combo box only certain cities to appear on the second ! For example if I select Attikis , then I want to be shown in dropdown menu only Agias Paraskeuis and not Agias Varvaras and Agiou Dimitriou and vice versa !
My code is this :
<form action="?" method="get">
<div class="jtype">
<label for="nomos"> Νομός </label>
<form name="nomoi_poleis" action="">
<select id="combo_nomoi" name="combo_nomoi" onchange="cityChange()" >
<option value="attikis"> Attikis</option>
<option value="thessalonikis"> Thessalonikis</option>
</select>
<br></br>
<label for="poli">Πόλη</label>
<select id="poleis" name="poleis">
<option value="agias varvaras"> Agias Varvara</option>
<option value="agias paraskeuis">Agias Paraskeuis</option>
<option value="agiou dimitriou"> Agiou Dimitriou</option>
</select>
</form>
</div>
</form>
Ana my JS :
<script type="text/javascript">
function changeCity(){
var nomos = document.getElementById("combo_nomoi");
if (nomos.value == "attikis"){
document.getElementById("attikis");
}
else{
document.getElementById("thessalonikis");
}
}
</script>
0The easiest way is to have a set of <select> menus, all but one of which has its display property set to none, with the one you want to display set to inline. Then in your onchange handler you run through your list of selects in a loop, setting the display property accordingly. Note inline event handlers like that are not very good practice; better to set them up via JavaScript in your page initialisation code. It misght look something like:
(HTML)
<select id="states">
<option value="0" selected="selected">State 1</option>
<option value="1">State 2</option>
...
</select>
<select id="cities_0" style="display: inline;">
<option value="...">Name 1</option>
<option value="...">Name 2</option>
...
</select>
<select id="cities_1" style="display: none;">
<option value="...">Name 1</option>
<option value="...">Name 2</option>
...
</select>
JavaScript
function change_city(evt)
{
var states=document.getElementById('states'),whichstate;
whichstate=states.options[state.selectedIndex].value;
for(var i=0;i<states.options.length;i++)
document.getElementById('cities_'+i).style.display=(i==whichstate ? 'inline' : 'none');
}
The following is a crude example(using only JS) to get this working:
http://jsfiddle.net/FMZ2H/
HTML
<form action="?" method="get">
<div class="jtype">
<label for="nomos">Νομός</label>
<form name="nomoi_poleis" action="">
<select id="combo_nomoi" name="combo_nomoi">
<option value="attikis">Attikis</option>
<option value="thessalonikis">Thessalonikis</option>
</select>
<br></br>
<label for="poli">Πόλη</label>
<select id="poleis" name="poleis">
<option id="option1" value="agias varvaras">Agias Varvara</option>
<option id="option2" value="agias paraskeuis">Agias Paraskeuis</option>
<option id="option3" value="agiou dimitriou">Agiou Dimitriou</option>
</select>
</form>
Javascript:
document.getElementById("combo_nomoi").onchange = cityChange
function cityChange() {
var elem = document.getElementById("combo_nomoi");
if (elem.options[elem.selectedIndex].text == "Attikis") {
document.getElementById("option1").disabled = true;
document.getElementById("option2").disabled = false;
document.getElementById("option3").disabled = false;
}
if (elem.options[elem.selectedIndex].text == "Thessalonikis") {
document.getElementById("option1").disabled = false;
document.getElementById("option2").disabled = true;
document.getElementById("option3").disabled = true;
}
}
As shown above, you could disable the options you don't want your user to select. I'll leave it to you to do it an better way than selecting each option by their id.

How do I select a specific option value from a drop down list to show a hidden div?

I have a drop down list that has 4 options, so what I want is when I click on the value "from" it shows a hidden div (used CSS to hide this div "display: none;"). anyone can help me with that? THANKS!
Html:
<select id="type">
<option value="">--select--</option>
<option value="category">Category</option>
<option value="brand_name">Brand</option>
<option value="campaign_name">Campaign</option>
<option value="from">Recap date</option>
</select>
</label>
<div id="showfrom">
<input type="text" class="filter" value="02-16-2012" id="from">
</div>
Js:
$("#type").change(function() {
var selected = $(this).find(':selected').val();
if (selected == from) {
$("#showfrom").show();
}
});
from should be a string literal. Also you need to hide if something else is selected so better if you can use .toggle()
$("#type").change(function () {
$("#showfrom").toggle(this.value == 'from');
}).change();//to set the initial state
Demo: Fiddle

Jquery/Js: Hide/Show Divs based on select box option values

These are Dynamic dependent select controls. The sets of values of (1-3, 4-6, 7-9) determine the use hide/show divs function. The problem is the function i have only hide/show depending on the div id. How can i make the function hide/show div depended on the values(1-3, 4-6, 7-9) found in the selectbox?
Jquery
$('#select').change(function() {
$('#sub1, #sub2, #sub3').hide();
$('#sub' + $(this).find('option:selected').attr('id')).show();
});
Html Setup
<html>
<select size="6" id="category">
<option value="">categories 1-3 </option>
<option value="">----</option>
<option value="">----</option>
</select>
<div id="sub1" style="display:none">
<select name="subc1" size="6">
<option value="1">subcategories 4-6</option>
<option value="2">---</option>
<option value="3">---</option>
</select>
</div>
<div id="sub2" style="display:none">
<select name="subc2" size="6">
<option value="4">subcategories 7-9</option>
<option value="5">----</option>
<option value="6">----</option>
</select>
</div>
<div id="sub3" style="display:none">
<select name="subc3" size="6">
<option value="7">End</option>
<option value="8">----</option>
<option value="9">----</option>
</select>
</div>
</html>
select the value from drop down change function and do the operation depends on the value of drop down, following is the sample code
$(function() // Shorthand for $(document).ready(function() {
$('select').change(function() {
if($(this).val() == 1)
{
$('#sub1').hide();
$('#sub2').show();
}
});
});
You nee to change minor change in your category select
<select size="6" id="category">
<option value="1">categories 1-3 </option>
<option value="2">----</option>
<option value="3">----</option>
</select>
$('select#category').on('change', function() {
$('div[id=^sub]:visible').hide();
$('div#sub' + this.value).show();
});
can also use .change() instead of .on('change').
$('select#category').change(function() {
$('div[id=^sub]:visible').hide();
$('div#sub' + this.value).show();
});
NOTE:
$('div[id=^sub]:visible') will point to all divs that have id start with sub and visible.
You are trying with $('#select') which need to be $('#category') or $('select#category').
According to your comment:
Complete solution will look like following:
function isOnlyDashed(text) {
return text.replace(/-/g, '').length === 0;
}
$('select#category').change(function() {
var text = $('option:selected', this).text();
if (!isOnlyDashed(text)) {
$('div[id=^sub]:visible').hide();
$('div#sub' + this.value).show();
}
});
$('select[name^=subc]').change(function() {
var text = $('option:selected', this).text();
if (!isOnlyDashed(text)) {
$(this).parent() // jump to parent div
.next('div[id^=sub]:hidden') // go to next hidden div
.show();
}
});
Complete Workout
The problem with your code is that you have an incorrect selector.
$('#select')...
should be
$('select')...
Also, this part is wrong
$('#sub' + $(this).find('option:selected').attr('id')).show();
Replace it with this
$('#sub' + $(this).val()).show();
Finally, having different elements with the same name/id "sub1" is probably a bad idea, though technically not illegal. It is certainly confusing.
working demo http://jsfiddle.net/FwBb2/1/
I have made minor changes in your Jquery code as well as added value in your first select drop-down list which was missing rest hope this helps.
Please lemme know if I missed anything! B-)
code
$('select').change(function() {
$('#sub1, #sub2, #sub3').hide();
$('#sub' + $(this).val()).show();
});​
HTML
<html>
<select id="category">
<option value="1">categories 1-3 </option>
<option value="2">----</option>
<option value="3">----</option>
</select>
<div id="sub1" style="display:none">
<select name="subc1" size="6">
<option value="1">subcategories 4-6</option>
<option value="2">---</option>
<option value="3">---</option>
</select>
</div>
<div id="sub2" style="display:none">
<select name="subc2" size="6">
<option value="4">subcategories 7-9</option>
<option value="5">----</option>
<option value="6">----</option>
</select>
</div>
<div id="sub3" style="display:none">
<select name="subc3" size="6">
<option value="7">End</option>
<option value="8">----</option>
<option value="9">----</option>
</select>
</div>
</html>​

Categories