JS(JavaScript)如何实现点击一个文本链接，同时输入两个参数到input文本框？

weixin_42258650 2018-05-21 04:06:56
js如何实现点击一个小类别的纯文本后，分别把当前所属的大类别文本和被点击的文本同时输入到当前页的两个input内？有js高手请联系我31673860@qq.com,可以付费！





这是第一步



这是第二步



第三部就是我要想实现的效果。


我现在能实现的效果是：弹出列表框div后，要分别点击两次（先点击大类别，传入大类别，再点击小类别，再传入小类别），我无法实现只点击一次小类别，同时也把大类别也传入的效果。请高手帮忙！
...全文
804 17 打赏 收藏 转发到动态 举报
写回复
用AI写文章
17 条回复
切换为时间正序
请发表友善的回复…
发表回复
weixin_42258650 2018-05-22
  • 打赏
  • 举报
 回复
引用 16 楼 functionsub 的回复:
<input class="addinput" type="text" name="P_class" id="P_class" /><br/><br/>
<input class="addinput" type="text" name="LL_class" id="LL_class"/>
<br/><br/>
<span id="tanchu2">选择费用类别/费用名称</span>
 
<div style="display:none;border-radius: 10px;width:20%;height:465px;position:fixed;left:5%;top:15%; overflow:hidden; background-color:#999;" id="popup2"> 
<div style="background-color:#999;width:100%;height:40px;line-height:40px; padding:5px 20px 5px 20px;">    
   <font color="#000"><strong>请先选择费用类别，再选择费用名称</strong></font></div>   
    <div style="width:94%; height:360px; margin:0 auto;text-align:center;background-color:#FFF;overflow-y:auto;-webkit-overflow-scrolling: touch">    
         <div>
    <p style="width:100px;height:40px; border-radius:5px; line-height:40px; background-color:#e8e8e8;margin:10px;"><a class="mingcheng">美工材料</a></p> 
    <a class="mcdetail" style="display:inline; line-height:30px; float:left; width:auto; height:30px; padding:3px; margin:0px 3px 0px 3px;">镭射纸</a>  
    <a class="mcdetail" style="display:inline; line-height:30px; float:left; width:auto; height:30px; padding:3px; margin:0px 3px 0px 3px;">丙烯颜料</a> 
    <a class="mcdetail" style="display:inline; line-height:30px; float:left; width:auto; height:30px; padding:3px; margin:0px 3px 0px 3px;">彩墨喷绘</a> 
    <a class="mcdetail" style="display:inline; line-height:30px; float:left; width:auto; height:30px; padding:3px; margin:0px 3px 0px 3px;">粉笔</a>   
    </div>
<hr style="height:1px;border:none;border-top:1px dashed #0066CC; width:90%; margin:10px 5% 10px 5%;" />
 
  <div>
<p style="width:100px;height:40px; border-radius:5px; line-height:40px; background-color:#e8e8e8;margin:10px;"><a class="mingcheng">钳工材料</a></p> 
    <a class="mcdetail" style="display:inline; line-height:30px; float:left; width:auto; height:30px; padding:3px; margin:0px 3px 0px 3px;">焊工眼镜</a>  
    <a class="mcdetail" style="display:inline; line-height:30px; float:left; width:auto; height:30px; padding:3px; margin:0px 3px 0px 3px;">断线钳</a> 
    <a class="mcdetail" style="display:inline; line-height:30px; float:left; width:auto; height:30px; padding:3px; margin:0px 3px 0px 3px;">8#铁丝</a> 
    <a class="mcdetail" style="display:inline; line-height:30px; float:left; width:auto; height:30px; padding:3px; margin:0px 3px 0px 3px;">焊机</a>   
<hr style="height:1px;border:none;border-top:1px dashed #0066CC; width:90%; margin:10px 5% 10px 5%;" />
</div>
 <div>
<p style="width:100px;height:40px; border-radius:5px; line-height:40px; background-color:#e8e8e8;margin:10px;"><a class="mingcheng">裱糊材料</a></p> 
    <a class="mcdetail" style="display:inline; line-height:30px; float:left; width:auto; height:30px; padding:3px; margin:0px 3px 0px 3px;">色丁布</a>  
    <a class="mcdetail" style="display:inline; line-height:30px; float:left; width:auto; height:30px; padding:3px; margin:0px 3px 0px 3px;">胶水</a> 
    <a class="mcdetail" style="display:inline; line-height:30px; float:left; width:auto; height:30px; padding:3px; margin:0px 3px 0px 3px;">剪刀</a> 
    <a class="mcdetail" style="display:inline; line-height:30px; float:left; width:auto; height:30px; padding:3px; margin:0px 3px 0px 3px;">花边</a>   
    </div>
<hr style="height:1px;border:none;border-top:1px dashed #0066CC; width:90%; margin:10px 5% 10px 5%;" />   
   </div>
       
   <a onClick="popup2.style.display='none'" style="text-align:center;"> 关闭 </a>  
    </div>
    </div>
    <script>
    // 弹出窗口2的js
(function(){
    var tanchu2 = document.getElementById('tanchu2'), popup2 = document.getElementById('popup2');
    tanchu2.onclick = function(){
                if( popup2.style.display =='none' ){
             popup2.style.display = 'block';
        }else{
                     popup2.style.display = 'none';
                }
                return false;
    }
})();
 
// 添加大类别的js
spans=document.getElementsByTagName("a");
for(i=0;i<spans.length;i++)
{if(spans[i].className=="mingcheng")
{  spans[i].onclick=function()
{    document.getElementById('P_class').value=this.innerHTML;
 }}}
  
 // 添加费用名称并关闭窗口2的js
spans=document.getElementsByTagName("a");
for(i=0;i<spans.length;i++){
    if(spans[i].className=="mcdetail"){ 
        spans[i].onclick=function(){    
            document.getElementById('LL_class').value=this.innerHTML;
            var parent = this.parentNode;
            var parentCate = parent.getElementsByClassName('mingcheng')[0].innerHTML;
            document.getElementById('P_class').value = parentCate ;
            popup2.style.display='none';
        }
    }
 }
  
// 选中大类别的js
    window.onload = function(){
        var divs = document.getElementsByTagName("p");
        var len = divs.length;
        for(var i=0;i<len;i++){
            divs[i].onclick = function(){
                for(var j=0;j<len;j++){
                    divs[j].style.backgroundColor = "#e8e8e8";
                }
                this.style.backgroundColor = "#999";
            };
        }
    };
 </script>
拿去吧。上面写的代码里P_class写错成p_class了
大侠，厉害了！！！ 问题解决了，你微信号多少，我给你发个红包表示对您的感谢和敬意！
functionsub 2018-05-22
  • 打赏
  • 举报
 回复 
<input class="addinput" type="text" name="P_class" id="P_class" /><br/><br/>
<input class="addinput" type="text" name="LL_class" id="LL_class"/>
<br/><br/>
<span id="tanchu2">选择费用类别/费用名称</span>
 
<div style="display:none;border-radius: 10px;width:20%;height:465px;position:fixed;left:5%;top:15%; overflow:hidden; background-color:#999;" id="popup2"> 
<div style="background-color:#999;width:100%;height:40px;line-height:40px; padding:5px 20px 5px 20px;">    
   <font color="#000"><strong>请先选择费用类别，再选择费用名称</strong></font></div>   
    <div style="width:94%; height:360px; margin:0 auto;text-align:center;background-color:#FFF;overflow-y:auto;-webkit-overflow-scrolling: touch">    
         <div>
    <p style="width:100px;height:40px; border-radius:5px; line-height:40px; background-color:#e8e8e8;margin:10px;"><a class="mingcheng">美工材料</a></p> 
    <a class="mcdetail" style="display:inline; line-height:30px; float:left; width:auto; height:30px; padding:3px; margin:0px 3px 0px 3px;">镭射纸</a>  
    <a class="mcdetail" style="display:inline; line-height:30px; float:left; width:auto; height:30px; padding:3px; margin:0px 3px 0px 3px;">丙烯颜料</a> 
    <a class="mcdetail" style="display:inline; line-height:30px; float:left; width:auto; height:30px; padding:3px; margin:0px 3px 0px 3px;">彩墨喷绘</a> 
    <a class="mcdetail" style="display:inline; line-height:30px; float:left; width:auto; height:30px; padding:3px; margin:0px 3px 0px 3px;">粉笔</a>   
    </div>
<hr style="height:1px;border:none;border-top:1px dashed #0066CC; width:90%; margin:10px 5% 10px 5%;" />
 
  <div>
<p style="width:100px;height:40px; border-radius:5px; line-height:40px; background-color:#e8e8e8;margin:10px;"><a class="mingcheng">钳工材料</a></p> 
    <a class="mcdetail" style="display:inline; line-height:30px; float:left; width:auto; height:30px; padding:3px; margin:0px 3px 0px 3px;">焊工眼镜</a>  
    <a class="mcdetail" style="display:inline; line-height:30px; float:left; width:auto; height:30px; padding:3px; margin:0px 3px 0px 3px;">断线钳</a> 
    <a class="mcdetail" style="display:inline; line-height:30px; float:left; width:auto; height:30px; padding:3px; margin:0px 3px 0px 3px;">8#铁丝</a> 
    <a class="mcdetail" style="display:inline; line-height:30px; float:left; width:auto; height:30px; padding:3px; margin:0px 3px 0px 3px;">焊机</a>   
<hr style="height:1px;border:none;border-top:1px dashed #0066CC; width:90%; margin:10px 5% 10px 5%;" />
</div>
 <div>
<p style="width:100px;height:40px; border-radius:5px; line-height:40px; background-color:#e8e8e8;margin:10px;"><a class="mingcheng">裱糊材料</a></p> 
    <a class="mcdetail" style="display:inline; line-height:30px; float:left; width:auto; height:30px; padding:3px; margin:0px 3px 0px 3px;">色丁布</a>  
    <a class="mcdetail" style="display:inline; line-height:30px; float:left; width:auto; height:30px; padding:3px; margin:0px 3px 0px 3px;">胶水</a> 
    <a class="mcdetail" style="display:inline; line-height:30px; float:left; width:auto; height:30px; padding:3px; margin:0px 3px 0px 3px;">剪刀</a> 
    <a class="mcdetail" style="display:inline; line-height:30px; float:left; width:auto; height:30px; padding:3px; margin:0px 3px 0px 3px;">花边</a>   
    </div>
<hr style="height:1px;border:none;border-top:1px dashed #0066CC; width:90%; margin:10px 5% 10px 5%;" />   
   </div>
       
   <a onClick="popup2.style.display='none'" style="text-align:center;"> 关闭 </a>  
    </div>
    </div>
    <script>
    // 弹出窗口2的js
(function(){
    var tanchu2 = document.getElementById('tanchu2'), popup2 = document.getElementById('popup2');
    tanchu2.onclick = function(){
                if( popup2.style.display =='none' ){
             popup2.style.display = 'block';
        }else{
                     popup2.style.display = 'none';
                }
                return false;
    }
})();
 
// 添加大类别的js
spans=document.getElementsByTagName("a");
for(i=0;i<spans.length;i++)
{if(spans[i].className=="mingcheng")
{  spans[i].onclick=function()
{    document.getElementById('P_class').value=this.innerHTML;
 }}}
  
 // 添加费用名称并关闭窗口2的js
spans=document.getElementsByTagName("a");
for(i=0;i<spans.length;i++){
    if(spans[i].className=="mcdetail"){ 
        spans[i].onclick=function(){    
            document.getElementById('LL_class').value=this.innerHTML;
            var parent = this.parentNode;
            var parentCate = parent.getElementsByClassName('mingcheng')[0].innerHTML;
            document.getElementById('P_class').value = parentCate ;
            popup2.style.display='none';
        }
    }
 }
  
// 选中大类别的js
    window.onload = function(){
        var divs = document.getElementsByTagName("p");
        var len = divs.length;
        for(var i=0;i<len;i++){
            divs[i].onclick = function(){
                for(var j=0;j<len;j++){
                    divs[j].style.backgroundColor = "#e8e8e8";
                }
                this.style.backgroundColor = "#999";
            };
        }
    };
 </script>
拿去吧。上面写的代码里P_class写错成p_class了
functionsub 2018-05-22
  • 打赏
  • 举报
 回复
你在每个大类小类外面都包了div了吗？
weixin_42258650 2018-05-22
  • 打赏
  • 举报
 回复
引用 11 楼 functionsub 的回复:
<div>
    <p style="width:100px;height:40px; border-radius:5px; line-height:40px; background-color:#e8e8e8;margin:10px;"><a class="mingcheng">美工材料</a></p> 
    <a class="mcdetail" style="display:inline; line-height:30px; float:left; width:auto; height:30px; padding:3px; margin:0px 3px 0px 3px;">镭射纸</a>  
    <a class="mcdetail" style="display:inline; line-height:30px; float:left; width:auto; height:30px; padding:3px; margin:0px 3px 0px 3px;">丙烯颜料</a> 
    <a class="mcdetail" style="display:inline; line-height:30px; float:left; width:auto; height:30px; padding:3px; margin:0px 3px 0px 3px;">彩墨喷绘</a> 
    <a class="mcdetail" style="display:inline; line-height:30px; float:left; width:auto; height:30px; padding:3px; margin:0px 3px 0px 3px;">粉笔</a>   
</div>
每个大类小类用个div包起来 
spans=document.getElementsByTagName("a");
for(i=0;i<spans.length;i++){
    if(spans[i].className=="mcdetail"){ 
        spans[i].onclick=function(){    
            document.getElementById('LL_class').value=this.innerHTML;
            var parent = this.parent;
            var parentCate = parent.getElementsByClassName('mingcheng')[0].innerHTML;
            document.getElementById('p_class').value = parentCate ;
            popup2.style.display='none';
        }
    }
 }
朋友，测试了，只能将小类传入，大类名称还是传入不了
functionsub 2018-05-22
  • 打赏
  • 举报
 回复
引用 12 楼 weixin_42258650 的回复:
朋友，测试了，只能将小类传入，大类名称还是传入不了 

        var parent = this.parent;
            var parentCate = parent.getElementsByClassName('mingcheng')[0].innerHTML;
            document.getElementById('p_class').value = parentCate ;
就这段代码没有起作用，还请大侠指点！
var parent = this.parent;
改成 
var parent = this.parentNode;
weixin_42258650 2018-05-22
  • 打赏
  • 举报
 回复
朋友，测试了，只能将小类传入，大类名称还是传入不了 

        var parent = this.parent;
            var parentCate = parent.getElementsByClassName('mingcheng')[0].innerHTML;
            document.getElementById('p_class').value = parentCate ;
就这段代码没有起作用，还请大侠指点！
functionsub 2018-05-22
  • 打赏
  • 举报
 回复 
<div>
    <p style="width:100px;height:40px; border-radius:5px; line-height:40px; background-color:#e8e8e8;margin:10px;"><a class="mingcheng">美工材料</a></p> 
    <a class="mcdetail" style="display:inline; line-height:30px; float:left; width:auto; height:30px; padding:3px; margin:0px 3px 0px 3px;">镭射纸</a>  
    <a class="mcdetail" style="display:inline; line-height:30px; float:left; width:auto; height:30px; padding:3px; margin:0px 3px 0px 3px;">丙烯颜料</a> 
    <a class="mcdetail" style="display:inline; line-height:30px; float:left; width:auto; height:30px; padding:3px; margin:0px 3px 0px 3px;">彩墨喷绘</a> 
    <a class="mcdetail" style="display:inline; line-height:30px; float:left; width:auto; height:30px; padding:3px; margin:0px 3px 0px 3px;">粉笔</a>   
</div>
每个大类小类用个div包起来 
spans=document.getElementsByTagName("a");
for(i=0;i<spans.length;i++){
    if(spans[i].className=="mcdetail"){ 
        spans[i].onclick=function(){    
            document.getElementById('LL_class').value=this.innerHTML;
            var parent = this.parent;
            var parentCate = parent.getElementsByClassName('mingcheng')[0].innerHTML;
            document.getElementById('p_class').value = parentCate ;
            popup2.style.display='none';
        }
    }
 }
weixin_42258650 2018-05-22
  • 打赏
  • 举报
 回复
大虾，你只是复制了一份，跟之前的是一样的呀
天际的海浪 2018-05-22
  • 打赏
  • 举报
 回复 


文本框1 <input type="text" id="text1" value="" /> <br />
文本框2 <input type="text" id="text2" value="" /> <br />

下面是弹出的div框
<div id="box">
	<div>
		<h4 class="main">大类1</h4>
		<span class="sub">小类1-1</span>
		<span class="sub">小类1-2</span>
		<span class="sub">小类1-3</span>
		<span class="sub">小类1-4</span>
	</div>
	<div>
		<h4 class="main">大类2</h4>
		<span class="sub">小类2-1</span>
		<span class="sub">小类2-2</span>
		<span class="sub">小类2-3</span>
	</div>
</div>
<script type="text/javascript">
$(function(){
	$("#box").on("click", ".sub", function(event){
		$("#text1").val($(this).closest("div").find(".main").text());
		$("#text2").val($(this).text());
		$("#box").hide();
	});
});

</script>
引用 6 楼 weixin_42258650 的回复:
[quote=引用 5 楼 jslang 的回复:] 


文本框1 <input type="text" id="text1" value="" /> <br />
文本框2 <input type="text" id="text2" value="" /> <br />

下面是弹出的div框
<div id="box">
	<div>
		<h4 class="main">大类1</h4>
		<span class="sub">小类1-1</span>
		<span class="sub">小类1-2</span>
		<span class="sub">小类1-3</span>
		<span class="sub">小类1-4</span>
	</div>
	<div>
		<h4 class="main">大类2</h4>
		<span class="sub">小类2-1</span>
		<span class="sub">小类2-2</span>
		<span class="sub">小类2-3</span>
	</div>
</div>
<script type="text/javascript">
$(function(){
	$("#box").on("click", ".sub", function(event){
		$("#text1").val($(this).closest("div").find(".main").text());
		$("#text2").val($(this).text());
		$("#box").hide();
	});
});

</script>
大侠，抱歉，刚刚才看到！ 看到后我欣喜若狂，立马开始测试 意外的是点击小类后没有反应 我是js新手，请多多指教！ [/quote] 引入jquery库 <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
weixin_42258650 2018-05-21
  • 打赏
  • 举报
 回复
我想要实现的效果就是：点击任何一个小类，同时将相应的大类和小类分别输入两个文本框，并关闭div窗口！
weixin_42258650 2018-05-21
  • 打赏
  • 举报
 回复
引用 4 楼 functionsub 的回复:
把你代码贴出来啊。。。 不贴代码怎么改你的代码。 总不能我再给你写一遍生成类别的代码吧。。



<input class="addinput" type="text" name="P_class" id="P_class" /><br/><br/>
<input class="addinput" type="text" name="LL_class" id="LL_class"/>
<br/><br/>
<span id="tanchu2">选择费用类别/费用名称</span>

<div style="display:none;border-radius: 10px;width:20%;height:465px;position:fixed;left:5%;top:15%; overflow:hidden; background-color:#999;" id="popup2"> 
<div style="background-color:#999;width:100%;height:40px;line-height:40px; padding:5px 20px 5px 20px;">    
   <font color="#000"><strong>请先选择费用类别，再选择费用名称</strong></font></div>   
    <div style="width:94%; height:360px; margin:0 auto;text-align:center;background-color:#FFF;overflow-y:auto;-webkit-overflow-scrolling: touch">    
       
    <p style="width:100px;height:40px; border-radius:5px; line-height:40px; background-color:#e8e8e8;margin:10px;"><a class="mingcheng">美工材料</a></p> 
    <a class="mcdetail" style="display:inline; line-height:30px; float:left; width:auto; height:30px; padding:3px; margin:0px 3px 0px 3px;">镭射纸</a>  
    <a class="mcdetail" style="display:inline; line-height:30px; float:left; width:auto; height:30px; padding:3px; margin:0px 3px 0px 3px;">丙烯颜料</a> 
    <a class="mcdetail" style="display:inline; line-height:30px; float:left; width:auto; height:30px; padding:3px; margin:0px 3px 0px 3px;">彩墨喷绘</a> 
    <a class="mcdetail" style="display:inline; line-height:30px; float:left; width:auto; height:30px; padding:3px; margin:0px 3px 0px 3px;">粉笔</a>   
<hr style="height:1px;border:none;border-top:1px dashed #0066CC; width:90%; margin:10px 5% 10px 5%;" />


<p style="width:100px;height:40px; border-radius:5px; line-height:40px; background-color:#e8e8e8;margin:10px;"><a class="mingcheng">钳工材料</a></p> 
    <a class="mcdetail" style="display:inline; line-height:30px; float:left; width:auto; height:30px; padding:3px; margin:0px 3px 0px 3px;">焊工眼镜</a>  
    <a class="mcdetail" style="display:inline; line-height:30px; float:left; width:auto; height:30px; padding:3px; margin:0px 3px 0px 3px;">断线钳</a> 
    <a class="mcdetail" style="display:inline; line-height:30px; float:left; width:auto; height:30px; padding:3px; margin:0px 3px 0px 3px;">8#铁丝</a> 
    <a class="mcdetail" style="display:inline; line-height:30px; float:left; width:auto; height:30px; padding:3px; margin:0px 3px 0px 3px;">焊机</a>   
<hr style="height:1px;border:none;border-top:1px dashed #0066CC; width:90%; margin:10px 5% 10px 5%;" />

<p style="width:100px;height:40px; border-radius:5px; line-height:40px; background-color:#e8e8e8;margin:10px;"><a class="mingcheng">裱糊材料</a></p> 
    <a class="mcdetail" style="display:inline; line-height:30px; float:left; width:auto; height:30px; padding:3px; margin:0px 3px 0px 3px;">色丁布</a>  
    <a class="mcdetail" style="display:inline; line-height:30px; float:left; width:auto; height:30px; padding:3px; margin:0px 3px 0px 3px;">胶水</a> 
    <a class="mcdetail" style="display:inline; line-height:30px; float:left; width:auto; height:30px; padding:3px; margin:0px 3px 0px 3px;">剪刀</a> 
    <a class="mcdetail" style="display:inline; line-height:30px; float:left; width:auto; height:30px; padding:3px; margin:0px 3px 0px 3px;">花边</a>   
<hr style="height:1px;border:none;border-top:1px dashed #0066CC; width:90%; margin:10px 5% 10px 5%;" />	
   </div>
      
   <a onClick="popup2.style.display='none'" style="text-align:center;"> 关闭 </a>  
    </div>
    </div>
	<script>
	// 弹出窗口2的js
(function(){
	var tanchu2 = document.getElementById('tanchu2'), popup2 = document.getElementById('popup2');
	tanchu2.onclick = function(){
                if( popup2.style.display =='none' ){
		     popup2.style.display = 'block';
		}else{
                     popup2.style.display = 'none';
                }
                return false;
	}
})();

// 添加大类别的js
spans=document.getElementsByTagName("a");
for(i=0;i<spans.length;i++)
{if(spans[i].className=="mingcheng")
{  spans[i].onclick=function()
{    document.getElementById('P_class').value=this.innerHTML;
 }}}
 
 // 添加费用名称并关闭窗口2的js
spans=document.getElementsByTagName("a");
for(i=0;i<spans.length;i++)
{if(spans[i].className=="mcdetail")
{  spans[i].onclick=function()
{    document.getElementById('LL_class').value=this.innerHTML;popup2.style.display='none';
 }}}
 
// 选中大类别的js
    window.onload = function(){
        var divs = document.getElementsByTagName("p");
        var len = divs.length;
        for(var i=0;i<len;i++){
            divs[i].onclick = function(){
                for(var j=0;j<len;j++){
                    divs[j].style.backgroundColor = "#e8e8e8";
                }
                this.style.backgroundColor = "#999";
            };
        }
    };
 </script>
以上的代码的html部分是我写的，js部分是在网上找来套用的，但要实现我的效果对我来说有难度，请大侠指点，不胜感激！
weixin_42258650 2018-05-21
  • 打赏
  • 举报
 回复
引用 5 楼 jslang 的回复:




文本框1 <input type="text" id="text1" value="" /> <br />

文本框2 <input type="text" id="text2" value="" /> <br />



下面是弹出的div框

<div id="box">

	<div>

		<h4 class="main">大类1</h4>

		<span class="sub">小类1-1</span>

		<span class="sub">小类1-2</span>

		<span class="sub">小类1-3</span>

		<span class="sub">小类1-4</span>

	</div>

	<div>

		<h4 class="main">大类2</h4>

		<span class="sub">小类2-1</span>

		<span class="sub">小类2-2</span>

		<span class="sub">小类2-3</span>

	</div>

</div>

<script type="text/javascript">

$(function(){

	$("#box").on("click", ".sub", function(event){

		$("#text1").val($(this).closest("div").find(".main").text());

		$("#text2").val($(this).text());

		$("#box").hide();

	});

});



</script>







大侠，抱歉，刚刚才看到！

看到后我欣喜若狂，立马开始测试

意外的是点击小类后没有反应

我是js新手，请多多指教！

天际的海浪 2018-05-21
  • 打赏
  • 举报
 回复 


文本框1 <input type="text" id="text1" value="" /> <br />
文本框2 <input type="text" id="text2" value="" /> <br />

下面是弹出的div框
<div id="box">
	<div>
		<h4 class="main">大类1</h4>
		<span class="sub">小类1-1</span>
		<span class="sub">小类1-2</span>
		<span class="sub">小类1-3</span>
		<span class="sub">小类1-4</span>
	</div>
	<div>
		<h4 class="main">大类2</h4>
		<span class="sub">小类2-1</span>
		<span class="sub">小类2-2</span>
		<span class="sub">小类2-3</span>
	</div>
</div>
<script type="text/javascript">
$(function(){
	$("#box").on("click", ".sub", function(event){
		$("#text1").val($(this).closest("div").find(".main").text());
		$("#text2").val($(this).text());
		$("#box").hide();
	});
});

</script>
functionsub 2018-05-21
  • 打赏
  • 举报
 回复
把你代码贴出来啊。。。 不贴代码怎么改你的代码。 总不能我再给你写一遍生成类别的代码吧。。
weixin_42258650 2018-05-21
  • 打赏
  • 举报
 回复
请大侠帮忙，谢谢！
functionsub 2018-05-21
  • 打赏
  • 举报
 回复
这需求信手拈来的，不至于付费吧。。
weixin_42258650 2018-05-21
  • 打赏
  • 举报
 回复
引用 1 楼 functionsub 的回复:
这需求信手拈来的，不至于付费吧。。
请大侠帮忙，谢谢！
《程序天下：JavaScript实例自学手册》光盘源码
8.6 一个链接打开两个地址 8.7 为链接提供下拉菜单 8.8 按钮链接 8.9 弹出鼠标所指的链接地址 8.10 链接的注释 8.11 为超链接同时绑定单击和双击事件 8.12 带链接的滚动字幕 8.13 会跳舞的链接 8.14 检测站点的连接...
用javascript实现从两个文本框中获取输入的数字，点击求和按钮，在文本框中得到结果。
编程完成以下效果 代码实现： Document //添加按钮点击事件 显示效果：
Javascript基础到入门
Javascript基础到入门视频，该课程主要围绕JavaScript能做什么？JavaScript应用场合、JavaScript的学习方法三大话题展开教学。讲师介绍：张中强，诺客科技技术总监/研发总监。丰富的项目经验，善于用精炼的代码来展示复杂的软件开发技术。曾参与并主持多个国家重大项目的开发，包括中国人民银行资金清算系统、中国银监会智能报表处理系统，电力调度系统。拥有10年以上软件技术开发培训经验，微软认证讲师(MCP)，微软认证数据库管理员(MCDBA)，微软认证系统工程师(MCSE)。
如何实现两个文本框同时输入
如何实现两个文本框同时输入 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x...
如何实现在文本框中按下Enter键就创建一个li标签？
如何实现文本框中按下Enter键就创建一个li标签？ 之前写过一个留言板，里面是点击提交按钮才会创建一个li标签，就在想如何实现按下enter键就可以创建一个li呢? 问题进行拆分： 如何实现文本框中按下Enter键触发事件...
JavaScript

87,921

社区成员

224,619

社区内容

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

加载中

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

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

+ 用AI写文章