织梦列表分页option下拉跳转框如何实现？

1. 纯JS实现（推荐，灵活且不修改核心文件）
2. PHP+JS实现（在模板中直接生成分页链接）

两种方法都能实现效果,但方法一更通用、更推荐，因为它不依赖于具体的分页标签，兼容性更好。

纯JS实现（推荐）

这种方法的核心思想是：织梦默认会生成所有页面的链接，我们只需要用JS监听下拉框的变化，然后跳转到对应的链接即可。

步骤 1：修改列表页模板文件

打开你的列表页模板文件,通常是 /templets/default/list_*.php ( 代表你的栏目ID)。

1. 找到分页代码：定位到织梦默认的分页代码，它通常是这样的：

   <div class="dede_pages">
       <ul class="pagelist">
           {dede:pagelist listitem="info,index,end,pre,next,pageno" listsize="5"/}
       </ul>
   </div>

2. 添加下拉跳转框：在分页代码的 ul 标签内部或旁边，添加一个 select 下拉框，为了美观，我们可以把它放在一个 li 标签里，让它和默认分页样式保持一致。

   
   （图片来源网络，侵删）

   <div class="dede_pages">
       <ul class="pagelist">
           <!-- 新增的下拉跳转框 -->
           <li class="select-page">
               <select id='pageSelect' name='pageSelect' onchange="javascript:window.location.href=this.options[this.selectedIndex].value;">
                   <option value='{dede:global.cfg_cmsurl/}/'>第1页</option>
                   <!-- 下拉框的选项将由JS动态生成 -->
               </select>
           </li>
           {dede:pagelist listitem="info,index,end,pre,next,pageno" listsize="5"/}
       </ul>
   </div>

   注意：这里的 {dede:global.cfg_cmsurl/}/ 需要替换成你的列表页首页链接，如果你的列表页是 http://www.yoursite.com/list/1.html，那么这里就应该是 {dede:global.cfg_cmsurl/}/list/1.html，更通用的做法是直接留空第一项，让JS来处理。

步骤 2：编写JS代码

在模板文件的底部,</body> 标签之前，添加以下 <script> 代码。

<script type="text/javascript">
    // 等待页面加载完成
    window.onload = function() {
        // 1. 获取当前页码，织梦的全局变量
        var currentPage = parseInt("{dede:field.page/}");
        if (isNaN(currentPage)) currentPage = 1; // 如果是第一页，page/可能为空
        // 2. 获取总页码，织梦的全局变量
        var totalPage = parseInt("{dede:global.totalpage/}");
        // 3. 获取下拉框的DOM元素
        var pageSelect = document.getElementById('pageSelect');
        // 4. 获取列表页的URL基础路径
        // 这里假设你的列表页URL是 /list/1.html 这样的格式
        // 如果你的URL是 /plus/list.php?tid=1 这样的，你需要修改这里
        var baseUrl = "{dede:field name='phpurl'/}/list.php?tid={dede:field.id/}";
        // 5. 动态生成下拉框选项
        for (var i = 1; i <= totalPage; i++) {
            var option = document.createElement("option");
            option.value = baseUrl + "&PageNo=" + i; // 拼接分页参数
            option.text = "第" + i + "页";
            // 如果是当前页，则选中此项
            if (i === currentPage) {
                option.selected = true;
            }
            pageSelect.appendChild(option);
        }
    }
</script>

代码解释：

• window.onload: 确保页面所有元素都加载完毕后再执行JS。
• {dede:field.page/} 和 {dede:global.totalpage/}：这是织梦模板中提供的全局变量，分别代表当前页码和总页数，JS可以直接读取它们。
• baseUrl: 我们需要构建一个基础URL，然后通过循环为每一页拼接上 &PageNo=i 的参数，请根据你的实际URL结构修改 baseUrl 的拼接方式。
• option.selected = true;: 这行代码会自动让下拉框选中当前所在的页面。

步骤 3：CSS样式（可选）

为了让下拉框看起来更协调,你可以添加一些CSS样式。

/* 在你的CSS文件中添加 */
.select-page select {
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin: 0 10px;
    font-size: 14px;
    cursor: pointer;
}

PHP+JS实现（在模板中直接生成分页链接）

这种方法与方法一类似,但 select 选项的 value 值是通过织梦的标签直接生成的，而不是用JS去拼接。

步骤 1：修改列表页模板

在分页代码旁添加 select 框，这次我们直接使用 {dede:pagelist} 来生成选项的链接。

<div class="dede_pages">
    <ul class="pagelist">
        <!-- 新增的下拉跳转框 -->
        <li class="select-page">
            <select id='pageSelect' name='pageSelect' onchange="javascript:window.location.href=this.options[this.selectedIndex].value;">
                {dede:pagelist listsize="100" listitem="option"}
            </select>
        </li>
        {dede:pagelist listitem="info,index,end,pre,next,pageno" listsize="5"/}
    </ul>
</div>

关键点：

• {dede:pagelist listitem="option"}：这是织梦 pagelist 标签的一个特殊用法，它会直接生成一个包含所有页码链接的 <option> 下拉列表项，格式如：<option value="list_2.html">第2页</option>。
• listsize="100"：这个属性在生成 option 时没有意义，但可以写一个很大的数来确保所有页码都显示出来。

步骤 2：编写JS代码

由于链接已经由 {dede:pagelist} 生成了，我们的JS代码就变得非常简单，只需要处理选中当前页的逻辑即可。

<script type="text/javascript">
    window.onload = function() {
        var currentPage = parseInt("{dede:field.page/}");
        if (isNaN(currentPage)) currentPage = 1;
        var pageSelect = document.getElementById('pageSelect');
        var options = pageSelect.options;
        // 遍历所有选项，找到当前页并选中它
        for (var i = 0; i < options.length; i++) {
            // 从option的value中提取页码，如 "list_2.html" -> 2
            // 注意：这种方法依赖于URL的格式，如果URL结构改变，这里也需要修改
            var pageText = options[i].text;
            var pageNum = parseInt(pageText.replace(/[^0-9]/ig, "")); // 提取页码数字
            if (pageNum === currentPage) {
                options[i].selected = true;
                break; // 找到后就可以退出循环了
            }
        }
    }
</script>

总结与选择

对于绝大多数情况,我强烈推荐使用方法一，因为它更健壮、更灵活，不容易因为网站URL结构的微小调整而失效。