如何使用 javascript 到 EJS 變量獲取 select 選項值？

Question

我正在嘗試將 select 選項值從onchange更改為 EJS 變量，以便在 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 compile ejs 如果上述錯誤沒有幫助，您可能想嘗試 EJS-Lint: Z5E056C500A1C4B6A7110B50D807BADEcom。 /RyanZim/EJS-Lint或者，如果您打算創建異步 function，請傳遞 async: true 作為選項。

Answer 1

請記住， <% %>中的所有代碼都由服務器端的 EJS 解釋。 這個處理的結果（html + css + js）發送給客戶端。 在客戶端，您可以獲得選定的選項並進行一些 Ajax 調用。

首先，在服務器端：

<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>
<% } %>

假設變量count已在 controller 上設置並且值為 3。

發送給客戶端的結果：

<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>

如果這不是錯誤，請提供更多詳細信息。