如何在smarty模板中使用js？

Question

Using html_options how to add id or class attribute to it and how to use javascript in smarty specifically I need to perform some action on html_option change. in my .php file i have the following piece code:

<script ....>
function changeProvince(){
        var province = document.getElementById("addr_province");
        province.addEventListener("change", function(){ alert("Hello World!"); });
    }
changeProvince();
</script>

and in my .tpl file

{{html_options name=addr_province options=$addr_province id="addr_province"}}

With the above piece of code it is not working.

Answer 1

There is no problem to use:

{html_options name=addr_province options=$addr_province id="addr_province"}

<script type="text/javascript">
function changeProvince(){
        var province = document.getElementById("addr_province");
        province.addEventListener("change", function(){ alert("Hello World!"); });
    }
changeProvince();
</script>

but as you see you need to create first options, and then run changeProvince(); JavaScript function.

Other way you get JavaScript error TypeError: province is null and simple it won't work.

EDIT

If you want, you can do it also this way:

<script type="text/javascript">
function changeProvince(){
        var province = document.getElementById("addr_province");
        province.addEventListener("change", function(){ alert("Hello World!"); });
    }
</script>

{html_options name=addr_province options=$addr_province id="addr_province"}

<script type="text/javascript">
changeProvince();
</script>

You can define your function earlier but run it after creating select and options