如何使用 javascript 到 EJS 变量获取 select 选项值？

Question

I'm Trying to get select option value onchange from JavaScript to EJS variable for using it in EJS for Loop.

    <!--EJS Code>
    <div class="form-row">
                                        <div class="form-group col-md-3">
                                          <!-- <label for="inputState">Count of Tablets</label> -->
    <select id="noOfDevice" class="form-control" name="noOfDevice" onchange="getDeviceCount(this)">
        <option selected>Select</option>
        <option value="1">01</option>
        <option value="2">02</option>
        <option value="3">03</option>
        <option value="4">04</option>
        <option value="5">05</option>
        <option value="6">06</option>
        <option value="7">07</option>
        <option value="8">08</option>
        <option value="9">09</option>
        <option value="10">10</option>
    </select>
    </div>
    </div>

    <script>
        function getDeviceCount(sel) {
            var countNo = sel.value;
            console.log("No of Device:" + sel.value);

        }
    </script>

    <% for(int i=0; i< count ; i++){ %>
        //SomeCode
        <%}%>

Error: Unexpected identifier in C:\Users\Ravish\Desktop\LicenseApp\IrysLicenseGen\views\addNew.ejs while compiling ejs If the above error is not helpful, you may want to try EJS-Lint: https://github.com/RyanZim/EJS-Lint Or, if you meant to create an async function, pass async: true as an option.

Answer 1

Keep in mind that all code within <% %> are interpreted by EJS on server-side. The result (html + css + js) of this processing is sent to the client. On the client side you can get selected option and do some Ajax call.

First, on the server side:

<select id="noOfDevice" class="form-control" name="noOfDevice" onchange="getDeviceCount(this)">
    <option selected>Select</option>
    <option value="1">01</option>
    <option value="2">02</option>
</select>

<script>
    function getDeviceCount(sel) {
        var countNo = sel.value;
        // TODO Send countNo to somewhere
    }
</script>
// use var or let. int is not valid
<% for(var i = 0; i < count; i++){ %>
    <span>Hello <%= i %></span>
<% } %>

Suppose variable count has been set on your controller and has the value 3.

Result sent to client:

<select id="noOfDevice" class="form-control" name="noOfDevice" onchange="getDeviceCount(this)">
    <option selected>Select</option>
    <option value="1">01</option>
    <option value="2">02</option>
</select>

<script>
    function getDeviceCount(sel) {
        var countNo = sel.value;
        // TODO Send countNo to somewhere
    }
</script>
<span>Hello 0</span>
<span>Hello 1</span>
<span>Hello 2</span>

If this is not the error, please provide more details.