I have a website and I want to include 2 drop down boxes. The values in the second drop down box depend on the first.
For instance if option A in drop down 1 is chosen then the available choices in dropdown box 2 would be 1,2,3
And if option 2 is chosen then drop down box 2 will show 5,6,7.
I've tried using JavaScript to receive the result of the first box as an argument and then use an 'if statement' to select what array of answers should be used by drop box 2 however this has been to no avail
''' I don't have any reasonable code to show '''
From what I've tried I can receive the index of the first drop down box choice however I cannot get the second box to show my array for that choice
<html>
<body>
<script type="text/javascript" src="jquery.min.js"></script>
<select id="ddl1">
<option selected value="1">A</option>
<option value="2">B</option>
</select>
<select id="ddl2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</body>
<script>
$("#ddl1").change(function(){
$('#ddl2 option').remove();
if($("#ddl1 option:selected").val()==1){
$('#ddl2').append('<option value="1">1</option>');
$('#ddl2').append('<option value="2">2</option>');
$('#ddl2').append('<option value="3">3</option>');
}
else if($("#ddl1 option:selected").val()==2){
$('#ddl2').append('<option value="5">5</option>');
$('#ddl2').append('<option value="6">6</option>');
$('#ddl2').append('<option value="7">7</option>');
}
});
</script>
</html>
Related
I happened to notice that my multiple select dropdowns are getting reset when I call the window.print() function on the click of a button to print the current page.
This seems to have been working on Chrome v80 but it seems the issue is part of v81.
I am using a workaround for this by displaying values in an input box (rather than the multiple select tag) on the print button click. I was wondering if there is a better solution to the issue.
A sample code is given below: Selected option values are retained in Chrome v80 but not on v81 when the print button is clicked.
<html>
<head>
<script>
function printPage(){
window.print();
}
</script>
</head>
<body>
<select id="test" name="test" multiple>
<option value="1">My val 1</option>
<option value="2" selected>My val 2</option>
<option value="3">My val 3</option>
<option value="4" selected>My val 4</option>
<option value="5">My val 5</option>
</select>
<input type="button" value="print" onclick="printPage()"/>
</body>
</html>
Is your issue that the elements do not appear selected in the printout, or that after pressing print, the page forgets what was selected and the user must select them again? If it is just about appearing in the printout, it is possible you have "background graphics" unchecked in the "more options" section of the print dialog
So there are 2 dropdown boxes in a page, Country, and state / province. when a certain option is picked in the country dropdown box, it changes the values in the state dropdown box.
Here is the country dropdown:
<select class="select optional" name="order[billing_country]" id="order_billing_country" aria-invalid="false">
<option selected="selected" value="USA">USA</option>
<option value="CANADA">CANADA</option>
</select>
Here is the state dropdown with USA selected:
<select class="select optional" name="order[billing_state]" id="order_billing_state">
<option value=""></option>
<option value="IL">IL</option>
<option value="NY">NY</option>
</select>
Here is the state dropdown with CANADA selected:
<select class="select optional" name="order[billing_state]" id="order_billing_state">
<option value=""></option>
<option value="SK">SK</option>
<option value="YT">YT</option>
</select>
When i select an option in the country dropdown normally, it works and changes the values in the state dropdown, but when i use javascript to select a country dropdown option, it doesnt change the values in the state dropdown. Here is some of the code i have tried:
document.getElementById('order_billing_country').value = "CANADA"
and
document.getElementById("order_billing_country").selectedIndex = 1
Neither of those cause the state dropdown to update.
So i was wondering if it was possible to click an option in the country dropdown like a normal human would, or if there was another way to select an option in the country dropdown that would cause the states to be updated.
This was marked as duplicate to Chained Select Boxes (Country, State, City) in a different thread. I am asking a different question though, im not trying to make the state dropdown change based on country, it already does that (when i select a dropdown option as a human). Im trying to select a country dropdown option with javascript and still have the state dropdown values change as if i was selecting a country as a human.
EDIT:: Found two scripts in the page that have something to do with it: here they are:
<script id="states-USA" type="text/x-tmpl">
<option value=""></option>
<option value="IL">IL</option>
<option value="NY">NY</option>
</script>
and
<script id="states-CANADA" type="text/x-tmpl">
<option value=""></option>
<option value="SK">SK</option>
<option value="YT">YT</option>
</script>
If i change values in those scripts, it changes what appears in the state dropdown after selecting the country. I couldnt find anything that calls those scripts in the page. Is it possible to call those scripts from the chrome extension or something like that?...
I'm trying to load a list of locations via ajax / jquery. Each time I type a letter into the input I get the first respponse back with subsequent responses appended. I've tried using .html('') and .empty() but not getting the desired results. I want the list to clear each time and return the new input results.
See this my example , clear select first by empty and then append new option value !!!
$('#ss').empty();
$('#ss').append($('<option>').html('test'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ss">
<option>$$</option>
<option>55</option>
</select>
Select all option and .remove() should work
function clearSelectFields(){
$('#selectField')
.children() // Select children of the select field
.remove(); // Remove all the selected element
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectField">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<button onclick="clearSelectFields()">Clear</button>
I'm new to php and open to any kind of suggestions regarding this issue...
I have a nested php array something like this....
category1->0->name
category1->1->name
category2->0->name
category2->1->name
......................
......................
I want to show 2 drop downs in smarty template file.
first one is a category drop down i.e. category1, category2.
second one is dependent on first. So, if I select category1 in first drop down then it should show me all the names associated with category1 and so on....
I am not using Jquery, instead I'm working with just javascript.
Can anyone please provide me sample code to do this?
<!--JAVASCRIPT-->
<!--CREATE DROPBOX WHEN CAT1 IS SELECTED-->
<script>
var category = document.getElementById("category").value;
if(category == CAT1){
document.getElementById("subcat").innerHTML='
<select name="subcategory" type="text" id="subcategory">
<option value=""></option>
<option value="Sub1">Sub1</option>
<option value="Sub2">Sub2</option>
<option value="Sub3">Sub3</option>
</select>"
';
}
</script>
<!--HTML MARKUP-->
<select name="category" type="text" id="category">
<option value=""></option>
<option value="CAT1">CAT1</option>
<option value="CAT2">CAT2</option>
<option value="CAT3">CAT3</option>
</select>
<!--SPACE TO PLACE DROPBOX FROM JAVASCRIPT-->
<span id="subcat">
</span>
I'm trying to add hidden input fields using JavaScript, but I did/have not achieved the desired result.
I want to add hidden fields to a form when a user selects a value from a dropdown list. The number of dropdown lists are not the same in this and other similar pages, there might be more or less than two.
I want to add a number of hidden fields when the user select value from the first dropdown list, and if he selects another value from another dropdown list I want to add additional hidden fields, and to save all the hidden fields' values.
Example:
<select id="s1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
If the user selects "2", I want to add 2 hidden fields:
<select id="s2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
If the user selects "3" in this second list I want to add three additional hidden fields but saving (preserving) the two hidden fields that was already dynamically added using the "s1" earlier.
Honestly, I have no idea what you are asking...but a quick fix could be using proper syntax for HTML.
i.e.
<select id"s2">
Change to
<select id="s2">
jQuery has the very useful change() function. So you might write something like:
$(document).ready(function(){
$("#s1").change(function(){
var field_value = $(this).val();
// then perhaps:
for(i = 0; i < field_value; i++){
}
// or
if(field_value == 2){
// do something
}
});
})
Hope thats of some use. Dukeland has a very good point above as well.