请问下,js怎么手动触发selected啊

obliviousSing 2016-02-18 11:33:43 


<div onclick='test()'>A</div>

<select>

            <option>某位</option>

            <option>女生</option>

            <option>男生</option>

</select>


请问下，怎么才能使得点击div就触发selected了，触发selected后，并且把选中的值赋给div，请问下，怎么写啊
...全文
510 15 打赏 收藏 转发到动态 举报
写回复
用AI写文章
15 条回复
切换为时间正序
请发表友善的回复…
发表回复
周小菜 2019-03-19
  • 打赏
  • 举报
 回复
我现在也想要这效果，通过外部事件，触发select的单击事件打开select,而不是上面很多大佬说的获取已经选了selected的值来渲染
天际的海浪 2016-02-19
  • 打赏
  • 举报
 回复 1
是这样么？ 

<div id="dd" onclick='test()'>A</div>
<select id="ss">
            <option>某位</option>
            <option>女生</option>
            <option>男生</option>
</select>
<script type="text/javascript">
function test() {
	var ss = document.getElementById("ss");
	var str = ss.options[ss.selectedIndex].text;
	document.getElementById("dd").innerHTML = str;
}
</script>
hookee 2016-02-19
  • 打赏
  • 举报
 回复 

<div onclick='test(this)'>A</div>
<select id="sel">
            <option>某位</option>
            <option>女生</option>
            <option>男生</option>
</select>
<script>
function test(obj){
	var sel = document.getElementById("sel");
	sel.options.selectedIndex = 1;
	obj.innerHTML = sel.options[sel.options.selectedIndex].text;
}
</script>
obliviousSing 2016-02-19
  • 打赏
  • 举报
 回复
引用 12 楼 u012418098 的回复:
[quote=引用 10 楼 obliviousSing 的回复:] [quote=引用 9 楼 u012418098 的回复:] [quote=引用 8 楼 obliviousSing 的回复:] [quote=引用 7 楼 u012418098 的回复:] [quote=引用 6 楼 obliviousSing 的回复:] [quote=引用 5 楼 u012418098 的回复:] 
<div id="dd">A</div>
<select id="ss" onchange="setText(this)">
            <option>某位</option>
            <option>女生</option>
            <option>男生</option>
</select>
<script type="text/javascript">
function setText(obj) {
    document.getElementById("dd").innerHTML = obj.value;
}
你是想要这个效果？
页面上的selected是不可见的，只能通过点击div才能触发。。。[/quote] 那你就把select隐藏掉，点击div的时候才显示，鼠标焦点离开select以后再把select隐藏.[/quote] 不行的这样，还有其他的功能需要这个，为了页面效果，selected永远不会出现在页面上的，影响美观，所以之前通过其他办法触发selected了。[/quote] select不会出现在页面上那你怎么选择select的值,都看不到如何做选择?[/quote] 
<selected style="opacity:0"></selected>
这样做的，只是视觉效果不可见。。[/quote] 
<div id="dd">A</div>
<select id="ss" style="top:-20px;position:relative;opacity:0" onchange="setText(this)">
            <option>某位</option>
            <option>女生</option>
            <option>男生</option>
</select>
<script type="text/javascript">
function setText(obj) {
    document.getElementById("dd").innerHTML = obj.value;
}
</script>
用的透明还是会占用位置的，你自己控制一下style里面top的高度看行不行吧[/quote] 因为我会好几个div共用一个selected，假如让selected显示的话，不是要写好几个selected么。。。我设置的selected的宽和高基本可以忽略的。
obliviousSing 2016-02-19
  • 打赏
  • 举报
 回复
引用 11 楼 hch126163 的回复:
这个效果？ <div onclick='test(this)'>A</div> <select id="slc" style="display:none" size=5> <option>某位</option> <option>女生</option> <option>男生</option> </select> <script type="text/javascript"> function test(div){ var slc =document.getElementById("slc"); if(!slc.onchange ){ slc.onchange = function(){ div.innerHTML = this.options[this.selectedIndex].text; this.style.display="none"; } } slc.style.display="block"; } </script>
应该就是你这个意思,不过我试了下,

                                           slc.onchange = function(){
						div.innerHTML = this.options[this.selectedIndex].text;
						this.style.display="none";
					}
这段代码没效果,在里面alert都没用
jio可 2016-02-19
  • 打赏
  • 举报
 回复
引用 10 楼 obliviousSing 的回复:
[quote=引用 9 楼 u012418098 的回复:] [quote=引用 8 楼 obliviousSing 的回复:] [quote=引用 7 楼 u012418098 的回复:] [quote=引用 6 楼 obliviousSing 的回复:] [quote=引用 5 楼 u012418098 的回复:] 
<div id="dd">A</div>
<select id="ss" onchange="setText(this)">
            <option>某位</option>
            <option>女生</option>
            <option>男生</option>
</select>
<script type="text/javascript">
function setText(obj) {
    document.getElementById("dd").innerHTML = obj.value;
}
你是想要这个效果？
页面上的selected是不可见的，只能通过点击div才能触发。。。[/quote] 那你就把select隐藏掉，点击div的时候才显示，鼠标焦点离开select以后再把select隐藏.[/quote] 不行的这样，还有其他的功能需要这个，为了页面效果，selected永远不会出现在页面上的，影响美观，所以之前通过其他办法触发selected了。[/quote] select不会出现在页面上那你怎么选择select的值,都看不到如何做选择?[/quote] 
<selected style="opacity:0"></selected>
这样做的，只是视觉效果不可见。。[/quote] 
<div id="dd">A</div>
<select id="ss" style="top:-20px;position:relative;opacity:0" onchange="setText(this)">
            <option>某位</option>
            <option>女生</option>
            <option>男生</option>
</select>
<script type="text/javascript">
function setText(obj) {
    document.getElementById("dd").innerHTML = obj.value;
}
</script>
用的透明还是会占用位置的，你自己控制一下style里面top的高度看行不行吧
hch126163 2016-02-19
  • 打赏
  • 举报
 回复
这个效果？ <div onclick='test(this)'>A</div> <select id="slc" style="display:none" size=5> <option>某位</option> <option>女生</option> <option>男生</option> </select> <script type="text/javascript"> function test(div){ var slc =document.getElementById("slc"); if(!slc.onchange ){ slc.onchange = function(){ div.innerHTML = this.options[this.selectedIndex].text; this.style.display="none"; } } slc.style.display="block"; } </script>
obliviousSing 2016-02-19
  • 打赏
  • 举报
 回复
引用 9 楼 u012418098 的回复:
[quote=引用 8 楼 obliviousSing 的回复:] [quote=引用 7 楼 u012418098 的回复:] [quote=引用 6 楼 obliviousSing 的回复:] [quote=引用 5 楼 u012418098 的回复:] 
<div id="dd">A</div>
<select id="ss" onchange="setText(this)">
            <option>某位</option>
            <option>女生</option>
            <option>男生</option>
</select>
<script type="text/javascript">
function setText(obj) {
    document.getElementById("dd").innerHTML = obj.value;
}
你是想要这个效果？
页面上的selected是不可见的，只能通过点击div才能触发。。。[/quote] 那你就把select隐藏掉，点击div的时候才显示，鼠标焦点离开select以后再把select隐藏.[/quote] 不行的这样，还有其他的功能需要这个，为了页面效果，selected永远不会出现在页面上的，影响美观，所以之前通过其他办法触发selected了。[/quote] select不会出现在页面上那你怎么选择select的值,都看不到如何做选择?[/quote] 
<selected style="opacity:0"></selected>
这样做的，只是视觉效果不可见。。
jio可 2016-02-19
  • 打赏
  • 举报
 回复
引用 8 楼 obliviousSing 的回复:
[quote=引用 7 楼 u012418098 的回复:] [quote=引用 6 楼 obliviousSing 的回复:] [quote=引用 5 楼 u012418098 的回复:] 
<div id="dd">A</div>
<select id="ss" onchange="setText(this)">
            <option>某位</option>
            <option>女生</option>
            <option>男生</option>
</select>
<script type="text/javascript">
function setText(obj) {
    document.getElementById("dd").innerHTML = obj.value;
}
你是想要这个效果？
页面上的selected是不可见的，只能通过点击div才能触发。。。[/quote] 那你就把select隐藏掉，点击div的时候才显示，鼠标焦点离开select以后再把select隐藏.[/quote] 不行的这样，还有其他的功能需要这个，为了页面效果，selected永远不会出现在页面上的，影响美观，所以之前通过其他办法触发selected了。[/quote] select不会出现在页面上那你怎么选择select的值,都看不到如何做选择?
obliviousSing 2016-02-19
  • 打赏
  • 举报
 回复
引用 7 楼 u012418098 的回复:
[quote=引用 6 楼 obliviousSing 的回复:] [quote=引用 5 楼 u012418098 的回复:] 
<div id="dd">A</div>
<select id="ss" onchange="setText(this)">
            <option>某位</option>
            <option>女生</option>
            <option>男生</option>
</select>
<script type="text/javascript">
function setText(obj) {
    document.getElementById("dd").innerHTML = obj.value;
}
你是想要这个效果？
页面上的selected是不可见的，只能通过点击div才能触发。。。[/quote] 那你就把select隐藏掉，点击div的时候才显示，鼠标焦点离开select以后再把select隐藏.[/quote] 不行的这样，还有其他的功能需要这个，为了页面效果，selected永远不会出现在页面上的，影响美观，所以之前通过其他办法触发selected了。
jio可 2016-02-19
  • 打赏
  • 举报
 回复
引用 6 楼 obliviousSing 的回复:
[quote=引用 5 楼 u012418098 的回复:] 
<div id="dd">A</div>
<select id="ss" onchange="setText(this)">
            <option>某位</option>
            <option>女生</option>
            <option>男生</option>
</select>
<script type="text/javascript">
function setText(obj) {
    document.getElementById("dd").innerHTML = obj.value;
}
你是想要这个效果？
页面上的selected是不可见的，只能通过点击div才能触发。。。[/quote] 那你就把select隐藏掉，点击div的时候才显示，鼠标焦点离开select以后再把select隐藏.
obliviousSing 2016-02-19
  • 打赏
  • 举报
 回复
引用 5 楼 u012418098 的回复:
<div id="dd">A</div>
<select id="ss" onchange="setText(this)">
            <option>某位</option>
            <option>女生</option>
            <option>男生</option>
</select>
<script type="text/javascript">
function setText(obj) {
    document.getElementById("dd").innerHTML = obj.value;
}
你是想要这个效果？
页面上的selected是不可见的，只能通过点击div才能触发。。。
jio可 2016-02-19
  • 打赏
  • 举报
 回复 
<div id="dd">A</div>
<select id="ss" onchange="setText(this)">
            <option>某位</option>
            <option>女生</option>
            <option>男生</option>
</select>
<script type="text/javascript">
function setText(obj) {
    document.getElementById("dd").innerHTML = obj.value;
}
你是想要这个效果？
obliviousSing 2016-02-19
  • 打赏
  • 举报
 回复
引用 1 楼 hookee 的回复:

<div onclick='test(this)'>A</div>
<select id="sel">
            <option>某位</option>
            <option>女生</option>
            <option>男生</option>
</select>
<script>
function test(obj){
	var sel = document.getElementById("sel");
	sel.options.selectedIndex = 1;
	obj.innerHTML = sel.options[sel.options.selectedIndex].text;
}
</script>
试了下，不行啊，估计是我意思没说清楚，我想要的是，当我点击div的时候，可以触发selected，然后可以在selected里面选择，选择之后，就把选中的值赋给div，不是直接要得到selected的值，我是想点击div的时候，触发selected的点击事件。
obliviousSing 2016-02-19
  • 打赏
  • 举报
 回复
引用 2 楼 jslang 的回复:
是这样么？ 

<div id="dd" onclick='test()'>A</div>
<select id="ss">
            <option>某位</option>
            <option>女生</option>
            <option>男生</option>
</select>
<script type="text/javascript">
function test() {
	var ss = document.getElementById("ss");
	var str = ss.options[ss.selectedIndex].text;
	document.getElementById("dd").innerHTML = str;
}
</script>
试了下，不行啊，估计是我意思没说清楚，我想要的是，当我点击div的时候，可以触发selected，然后可以在selected里面选择，选择之后，就把选中的值赋给div，不是直接要得到selected的值，我是想点击div的时候，触发selected的点击事件。
JavaScript原生实现事件监听及手动触发
这时就需要通过js手动触发监听事件. jquery实现方法就是trigger('eventType') 原生实现: <input type="checkbox" id="chk"> document.querySelector('#chk').addEventListener('change', function() { ...
手动触发select的change事件
语文 数学 英语 ... /////////////手动触发selectd的change事件//////////////// $("#ddl_test").change(function () { var aaa = $("#ddl_test option:selected").text(); alert(aaa); });
Layui select赋值并手动自动触发select事件
一次select手动赋值操作发现没有该select的选中事件，琢磨了下做如下操作即可。 写了个common.js常用操作的工具类，修改了赋值方法。 layui.define(['layer','form','laydate','dtree','carousel'],function (e) { ...
JS模拟select点击，触发change事件
JS模拟select点击，触发change事件
JS循环网页元素,手动触发事件
for (i=0;i&lt;document.all.tags("input").length;i++) { if(document.all.tags("input")[i].type == "checkbox") { if(selected ...
JavaScript

87,917

社区成员

224,617

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章