I am a newbie of smarty so please pardon my innocence :oops:
I am following a code left by previous programmer and i have this problem on dynamically changing the values of a select box depending on the selected value of another select box.
So here's the situation:
I have drop down named "Section" and another one named "Subsection".
What i need to come up with is that when i choose a Section the Values of the Subsection will change too and only displays the Subsections which is under that section selected.
here's a javascript simulation of the problem:
<html>
<head>
<title>Box changing demo</title>
<script type="text/javascript">
var items = new Array();
items[0] = new Array("Dog", "Cat", "Pig");
items[1] = new Array("Andromeda", "Boötes", "Cepheus");
items[2] = new Array("Mercury", "Venus", "Earth");
items[3] = new Array("BMW", "Audi", "Bugatti");
function changeItems(){;
num=document.changer.section.options[document.changer.section.selectedIndex].value;
document.changer.subsection.options.length = 0;
for(i=0; i<items[num].length; i++){
document.changer.subsection.options[i] = new Option(items[num][i], items[num][i]);
}
}
</script>
</head>
<body>
<form name="changer">
<select name="section" onchange="changeItems();">
<option value="0">Animals</option>
<option value="1">Constelations</option>
<option value="2">Planets</option>
<option value="3">Cars</option>
</select>
<select name="subsection">
<!--<option>tgntgn</option> -->
</select>
</form>
</body>
</html>
This is what i need to do with smarty.
Anybody?
Thank you for your help.
You can't do it in Smarty, because it just cannot be done with HTML only. You have to use Javascript for this. Look at http://www.texotela.co.uk/code/jquery/select/ - it seems easy enough to implement.
Hope This Answers Your Question
<!--JAVASCRIPT-->
<!--CREATE DROPBOX WHEN SEC1 IS SELECTED-->
<script>
var section= document.getElementById("section").value;
if(section == SEC1){
document.getElementById("subSEC").innerHTML='
<select name="subsection" type="text" id="subsection">
<option value=""></option>
<option value="Sub1">Sub1</option>
<option value="Sub2">Sub2</option>
<option value="Sub3">Sub3</option>
</select>"
';
}
</script>
<!--HTML MARKUP-->
<select name="section" type="text" id="section">
<option value=""></option>
<option value="SEC1">SEC1</option>
<option value="SEC2">SEC2</option>
<option value="SEC3">SEC3</option>
</select>
<!--SPACE TO PLACE DROPBOX FROM JAVASCRIPT-->
<span id="subSEC">
</span>
try something like:
{html_options name=section options=$options selected=$index
onchange="changeItems();"}
where $options and $index (index of selected option in select tag) are assigned in php:
<?php
...
$smarty = new Smarty ();
...
$smarty->assign ( 'index', $some_php_val );
$smarty->assign ( 'options', $some_php_array );
...
?>
for more info check:
http://www.smarty.net/docsv2/en/language.function.html.options.tpl
http://www.smarty.net/forums/viewtopic.php?p=53422
Related
I have a drop down and I need disable the options, but user can display the drop-down menu and see the options available but the user cannot select none.
<select name="list" disabled="disabled" id="list">
<option value="1">uno</option>
<option value="2">dos</option>
<option value="3">tre</option>
</select>
Disabling each option individually would produce the desired outcome.
In the following snippet, I disabled the first two options.
<select name="list" id="list">
<option value="1" >uno</option>
<option value="2" >dos</option>
<option value="3">tre</option>
</select>
<script>
// Get all options within <select id='list'>...</select>
var options = document.getElementById("list").getElementsByTagName("option");
for (var i = 0; i < options.length; i++) {
// Disable them one by one
options[i].disabled = true;
}
</script>
The javascript part has been adapted from an an answer that you can find here
I have seen several examples of sending individual parameters to a JavaScript function, but not a List.
When I try to pass a list, it comes to function as a big string. This is what I have:
<select id="namespace" name="namespace"
th:responseList="${responseList}"
th:onchange="javascript:print(this.getAttribute('responseList'));">
<option value="">Select Source Namespace</option>
<option th:each="item : ${responseList}"
th:value="${item.namespace}"
th:text="${item.namespace}"></option>
</select>
function print(responseList) {
console.log(responseList);
}
Try this
<script th:inline="javascript">
var list = [[${responseList}]];
console.log(list );
</script>
Hope work for you
I have a drop down like following,
<select id="role" class="form-control" th:field="*{role}" >
<option th:field="*{role}" value="USER">USER</option>
<option selected th:field="*{role}" value="ADMIN" >ADMIN</option>
<option th:field="*{role}" value="SUPERUSER">SUPERUSER</option>
</select>
I want default option as ADMIN. For that i added selected inside option tag. but default option still pointing to USER. Can anyone help me o solve this. Thanks
Set the value of "role" to "ADMIN" in your controller (in the java), before the page is rendered.
Also, you don't need all those extra th:field attributes. th:field should only appear on the select.
<select id="role" class="form-control" th:field="*{role}" >
<option value="USER">USER</option>
<option value="ADMIN" >ADMIN</option>
<option value="SUPERUSER">SUPERUSER</option>
</select>
I did something like following to get it working.
<script th:inline="javascript">
/*<![CDATA[*/
window.addEventListener("DOMContentLoaded", function() {
var optionSelected = [[${product.role}]];
if(optionSelected == null){
$("#role").val("ADMIN");
}
});
/*]]>*/
</script>
and removed the selected attribute from the option.
Now I'm working with Laravel 5.
I got value from select option like below:
select name="billing_provider" onChange="changeLanguage(this.value)"> #foreach($tests as $test)
option value="{{ $test->tax_id }},{{ $test->npi }}" name="billing_provider">
{{ $test->test_name }} </option>#endforeach </select>
Here I need to explode the option value and store it into another text field value.
How can I do that?
First, you have made a mistake building your HTML.
<select> has an attribute name which is going to be the key in the global arrays $_GET or $_POST.
However <option> doesn't have attribute name. You should remove that.
If you want to separate the value of billing_provider in your backend (php /w Laravel), do so.
In your method which handles the submission of the form:
$input = Input::get('billing_provider');
$billing_provider = explode(',', $input);
//Now $billing_provider[0] === $test->tax_id
//And $billing_provider[1] === $test->npi
Or if you want to perform this action before form submission and you're using jQuery, then you can do this:
https://jsfiddle.net/17fkpqbe/
JavaScript (/w jQuery):
$(document).ready(function() {
$('select').change(function() {
$('.inputs').html('');
var $explodedVal = $(this).val().split(',');
for(i = 0; i < $explodedVal.length; i++) {
$('.inputs').append('<input value="' + $explodedVal[i]+'">');
}
});
});
HTML:
<select>
<option></option>
<option value="123,555">Some Name 1</option>
<option value="123,444">Some Name 2</option>
<option value="123,333,555">Some Name 3</option>
</select>
<div class="inputs"></div>
Sorry guys, I should have posted the script directly without cleaning it. Please check the updated script, it should now clear things up. Thanks!
Consider the following JavaScript :
var selected = 0;
var options = 0;
$('.newListSelected').each(function() {
selected = $(this).children('.selectedTxt');
selected = selected.text();
/* Everything before this line works completely fine */
options = $(this).prev();
options.find('option[value=' +selected+ ']').attr('selected', 'selected');
}).remove();
And HTML :
<select name="type[]" style="display: none;">
<optgroup>
<option value="none">Select</option>
</optgroup>
<optgroup label="First Group">
<option value="1">One</option>
<option value="2">Two</option>
</optgroup>
<optgroup label="Second Group">
<option value="10">Ten</option>
<option value="20">Twenty</option>
</optgroup>
</select>
<div class="newListSelected">
<div class="selectedTxt">20</div>
<ul class="newList">
<!-- Other stuff here -->
</ul>
</div>
What I'm trying to do actually is adding the selected attribute to the corresponding select option that has the same value as the text in .selectedTxt. In the code above, it should add selected="selected" to <option value="20">Twenty</option>.
However its not performing as expected, I also tried adding alert(option); below prev(); but it didn't output anything useful.
Thanks.
The Javascript works fine, as can be seen here: http://jsfiddle.net/4HsXp/
If you need to be able to select multiple items in a select element, you need to set the multiple and size attribute, like this:
<select multiple="multiple" size="2">
<option>1</option>
<option>2</option>
</select>
See: http://reference.sitepoint.com/html/select
Edit:
Attaching console.log statements to the new code still does not any problem. Running it on jsfiddle gave me the correct output:
jQuery(select)
Original Value: none
New Value: 20
I'm not sure what you are trying to do, but why couldn't you just select all option elements with proper selectors? If you want to select only some options, then you have to add extra selector attrbiutes.
$('select option').each(function() {
$(this).attr('selected', 'selected');
});