Javascript 将选择类和输入类组合在一起

目前，我必须从下拉列表中选择一个值，然后单击按钮“每页项目”。我不希望必须单击“每页项目”按钮。我想将“每页项目”按钮中的功能嵌入Select元素中的4个选项3、6、9、12中

<form method="GET">
    <input class="btn btn-primary mb-4 height" type="submit" value="Items Per Page">
    <select class="btn btn-outline-primary mb-4 height" name="paginate_by" id="">
        <option value="3">3 </option>
        <option value="6">6 </option>
        <option value="9">9 </option>
        <option value="12">12 </option>
    </select>    
</form>

---

我从Larrys post了解了onchange=javascript:this.form.submit。

当您选择任何valuenumber时，javascript会检测您选择的valuenumber，并根据valuenumber创建元素并将它们附加到DOM中 因此，您可以定制contents div

const select=document.getElementsByTagName'select'[0]； const container=document.getElementById'container'； select.onchange==>{ container.innerHTML=； 对于设i=0；i我想我不明白你的问题你到目前为止尝试了什么我让用户决定在页面3、6、9或12上显示多少项。当用户选择3、6、9或12时，我希望页面重新加载，并且根据用户的选择仅显示3、6、9或12项。此时，用户必须选择3、6、9或12项，然后单击每页的项。请稍等片刻我想帮你

    <option value="3" type="submit">3 </option>
    <option class="btn btn-primary mb-4 height" value="6">6 </option>

    <div class ="example" style="display: inline-block" ><div style="text-align:center"> <form method="GET">
  <input class="btn btn-primary mb-4 height" type="submit" value="Items Per Page">
    <select class="btn btn-outline-primary mb-4 height" name="paginate_by" id="ItemsPerPage" onchange="javascript:this.form.submit()">
        <option value="3">3 </option>
        <option value="6">6 </option>
        <option value="9">9 </option>
        <option value="12">12 </option>
    </select>    
</form>
</div></div>