如何将select中的内容绑定给上下箭头

把html的select控件的下拉箭头改成图片： 1、需要修改的html代码如下： Here is the unstyled select box The second option The third option 2、css样式代码如下： div { margin: 20px} .styled-select{ background: url(./15xvbd5.png) no...

这个得用脚本替换select为普通文字。用JSer脚本框架，写以下代码就可以做到。

你可以根据你的需要稍加修改。

function doPrint(){

JSer("select").each(function(){

JSer("<span/>").html(this.options[this.selectedIndex].text).addClass(".selectText").beforeTo(this)

JSer(this).hide()

})

window.print()

JSer("select").show()

JSer(".selectText").remove()

}

<input type="button" value="打印" onclick="doPrint()"/>

以上代码实现原理是，先把网页中的所有select下拉菜单取出来，然后分别在每个select前面添加一个span元素,设置span的显示文字为下拉菜单中的文字，再把下拉菜单隐藏起来。

这样 *** 作后就可以打印了window.print()

调用打印后，再把添加span移除掉,并还原显示select。

有关这方面的，你可以多学学脚本框架。例如JSer。将很有帮助。

<div class="styled-select"> <select> <option>Here is the first option</option> <option>The second option</option> </select></div>//下拉箭头保持不变。没有直接美化它的方式，但解决方案还是非常简单的，首先我们需要用一个div容器包裹在select元素外围.styled-select { width: 240px height: 34px overflow: hidden background: url(new_arrow.png) no-repeat right #ddd}/*下一步我们需要加入一些css，以确保选择框元素被以某种方式美化：我们需要确保选择框的跨度比外围的div容器更宽，这样默认的下拉箭头就会消失（选择框比外面的div宽大，默认的下拉箭头就会被隐藏）我们的div容器需要被美化成新的下拉箭头出现在我们预想的位置就是用图片把原下拉箭头覆盖*/.styled-select select { background: transparent width: 268px padding: 5px font-size: 16px border: 1px solid #ccc height: 34px -webkit-appearance: none/*for chrome*/}

---