点击下拉菜单中option，自动增加文本框效果javascript及clone

caofwrxu62864 2016-06-14 07:45:41
希望产生的效果是选择others,在下方出现一个文本框
写了一段代码，有很严重的bug,
如果没有选择others,点击add more
新出现的下拉菜单即使选择了others也不会出现文本框

如果一开始就选择了others，点击add more,在新的下拉菜单里选择others，新添加的文本框将出现在第一次出现文本框的下面

代码如下
<li class="msg"><span><font>* </font>Broadband</span>
<div class="wid350">

<select id = selectbroadband placeholder="BB1" name="selectbroadband" onchange="testClk()">

<option selected>BB1</option>
<option>BB2</option>
<option>BB3</option>
<option>BB4</option>
<option>BB5</option>
<option value="others">Others</option>

</select>

<input placeholder="Effective Date" class="edinput" type="text" onfocus="(this.type='date')" id="date">
</div>

<em id="broadband_message"></em>
</li>
<li class="msg" >
<span> </span>

<div class="wid350" id="org">

</div>


<em id="date_message" class="txt_new"></em>
</li>
</div>

<div class="addframe">
</div>

<li class="msg">
<span> </span>
<div class="wid350 myright">
<button type="button" onClick="addmore('broadbandframe')">Add More</button>
</div>
</li>
<script type="text/javascript">
function addmore(classname) {
//$('.'+classname).html($('.'+classname).html() + '<br>' + $('.'+classname).html());
$('.'+classname).next('.addframe').append('<br>' + $('.'+classname).html());


}
</script>
<script type="text/javascript">
function testClk(){

var obj = document.getElementById("org");
var space=document.getElementById("space");
var sel = document.getElementById("selectbroadband");
if (sel.value == "others")
{
var input1 = document.createElement('input');
input1.setAttribute('type', 'text');
input1.setAttribute('name', 'others');
input1.setAttribute('class', 'wid350');
<!--var input2 = document.createElement('span');input1.setAttribute('type', 'text');input1.setAttribute('name', 'space'); input1.setAttribute('value', ' ');space.appendChild(input2);-->
obj.appendChild(input1);

}
}
</script>
不知道该如何解决这个问题，求高手指点，最好能讲详细点
...全文
242 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
caofwrxu62864 2016-06-16
  • 打赏
  • 举报
 回复
引用 4 楼 u012418098 的回复:
[quote=引用 2 楼 caofwrxu62864 的回复:]
[quote=引用 1 楼 u012418098 的回复:]
这个class = 'broadbandframe'都不存在怎么会添加，描述也不清楚...代码也不会贴！你这样发代码别人都不会看,看着都头大

刚刚发现自己贴漏了，可以私聊吗[/quote]

<!DOCTYPE html >

<html>

<head>

    <meta charset="utf-8" />

    <title>test</title>

</head>

<body>

<div id="main"></div>

<button id="btn" type="button">Add More</button>

<script src="../js/jquery.js"></script>

<script>

    function init(){

        var html = '<div class="broadbandframe"><select class="selectbroadband"><option selected>BB1</option>'

                +'<option>BB2</option><option>BB3</option><option>BB4</option><option>BB5</option><option value="others">Others</option></select>'

                +'<input class="edinput" type="text"/><div class="wid350"></div></div>';

        $('#main').append(html);

    }

    $("#btn").bind("click",function(){

         init();

    });



    $("#main").on("change",".selectbroadband",function(){

        var val = $(this).val();

        if(val === 'others'){

            if($(this).siblings("div").children("input").length === 0){

                $(this).siblings("div").append("<input type='text'name='others'class='wid350'/>");

            }else{

                //已创建不再创建

            }

        }

    });

    init();

</script>

</body>

</html>


我把多余的东西删掉了，自己去改下。[/quote]

你这个怎么没有框出来

caofwrxu62864 2016-06-16
  • 打赏
  • 举报
 回复
引用 6 楼 caofwrxu62864 的回复:
[quote=引用 5 楼 caofwrxu62864 的回复:]
[quote=引用 4 楼 u012418098 的回复:]
[quote=引用 2 楼 caofwrxu62864 的回复:]
[quote=引用 1 楼 u012418098 的回复:]
这个class = 'broadbandframe'都不存在怎么会添加，描述也不清楚...代码也不会贴！你这样发代码别人都不会看,看着都头大

刚刚发现自己贴漏了，可以私聊吗[/quote]

<!DOCTYPE html >

<html>

<head>

    <meta charset="utf-8" />

    <title>test</title>

</head>

<body>

<div id="main"></div>

<button id="btn" type="button">Add More</button>

<script src="../js/jquery.js"></script>

<script>

    function init(){

        var html = '<div class="broadbandframe"><select class="selectbroadband"><option selected>BB1</option>'

                +'<option>BB2</option><option>BB3</option><option>BB4</option><option>BB5</option><option value="others">Others</option></select>'

                +'<input class="edinput" type="text"/><div class="wid350"></div></div>';

        $('#main').append(html);

    }

    $("#btn").bind("click",function(){

         init();

    });



    $("#main").on("change",".selectbroadband",function(){

        var val = $(this).val();

        if(val === 'others'){

            if($(this).siblings("div").children("input").length === 0){

                $(this).siblings("div").append("<input type='text'name='others'class='wid350'/>");

            }else{

                //已创建不再创建

            }

        }

    });

    init();

</script>

</body>

</html>


我把多余的东西删掉了，自己去改下。[/quote]

你这个怎么没有框出来

[/quote]
文本框的样式怎么变了[/quote]

引用 6 楼 caofwrxu62864 的回复:
[quote=引用 5 楼 caofwrxu62864 的回复:]
[quote=引用 4 楼 u012418098 的回复:]
[quote=引用 2 楼 caofwrxu62864 的回复:]
[quote=引用 1 楼 u012418098 的回复:]
这个class = 'broadbandframe'都不存在怎么会添加，描述也不清楚...代码也不会贴！你这样发代码别人都不会看,看着都头大

刚刚发现自己贴漏了，可以私聊吗[/quote]

<!DOCTYPE html >

<html>

<head>

    <meta charset="utf-8" />

    <title>test</title>

</head>

<body>

<div id="main"></div>

<button id="btn" type="button">Add More</button>

<script src="../js/jquery.js"></script>

<script>

    function init(){

        var html = '<div class="broadbandframe"><select class="selectbroadband"><option selected>BB1</option>'

                +'<option>BB2</option><option>BB3</option><option>BB4</option><option>BB5</option><option value="others">Others</option></select>'

                +'<input class="edinput" type="text"/><div class="wid350"></div></div>';

        $('#main').append(html);

    }

    $("#btn").bind("click",function(){

         init();

    });



    $("#main").on("change",".selectbroadband",function(){

        var val = $(this).val();

        if(val === 'others'){

            if($(this).siblings("div").children("input").length === 0){

                $(this).siblings("div").append("<input type='text'name='others'class='wid350'/>");

            }else{

                //已创建不再创建

            }

        }

    });

    init();

</script>

</body>

</html>


我把多余的东西删掉了，自己去改下。[/quote]

你这个怎么没有框出来

[/quote]
文本框的样式怎么变了[/quote]

引用 6 楼 caofwrxu62864 的回复:
[quote=引用 5 楼 caofwrxu62864 的回复:]
[quote=引用 4 楼 u012418098 的回复:]
[quote=引用 2 楼 caofwrxu62864 的回复:]
[quote=引用 1 楼 u012418098 的回复:]
这个class = 'broadbandframe'都不存在怎么会添加，描述也不清楚...代码也不会贴！你这样发代码别人都不会看,看着都头大

刚刚发现自己贴漏了，可以私聊吗[/quote]

<!DOCTYPE html >

<html>

<head>

    <meta charset="utf-8" />

    <title>test</title>

</head>

<body>

<div id="main"></div>

<button id="btn" type="button">Add More</button>

<script src="../js/jquery.js"></script>

<script>

    function init(){

        var html = '<div class="broadbandframe"><select class="selectbroadband"><option selected>BB1</option>'

                +'<option>BB2</option><option>BB3</option><option>BB4</option><option>BB5</option><option value="others">Others</option></select>'

                +'<input class="edinput" type="text"/><div class="wid350"></div></div>';

        $('#main').append(html);

    }

    $("#btn").bind("click",function(){

         init();

    });



    $("#main").on("change",".selectbroadband",function(){

        var val = $(this).val();

        if(val === 'others'){

            if($(this).siblings("div").children("input").length === 0){

                $(this).siblings("div").append("<input type='text'name='others'class='wid350'/>");

            }else{

                //已创建不再创建

            }

        }

    });

    init();

</script>

</body>

</html>


我把多余的东西删掉了，自己去改下。[/quote]

你这个怎么没有框出来

[/quote]
文本框的样式怎么变了[/quote]
我照你的改了还是不行

<div class="broadbandframe" id="broadbandframe">
<div class="broadbandframe2" id="broadbandframe2">
<li class="msg"><span><font>* </font>Broadband</span>
<div class="wid350">

<select class="selectbroadband"id = "selectbroadband" placeholder="BB1" name="selectbroadband" >
<option selected>BB1</option>
<option>BB2</option>
<option>BB3</option>
<option>BB4</option>
<option>BB5</option>
<option value="others">Others</option>
</select>
<input placeholder="Effective Date" class="edinput" type="text" onfocus="(this.type='date')" id="date"></div>

<em id="broadband_message"></em></li>
<li class="msg" >
<span> </span>
<div class="wid350" id="org2" name="org"></div>
<em id="date_message" class="txt_new"></em></li>
</div>
</div>
<li class="msg">
<span> </span>
<div class="wid350 myright">
<button type="button" id="btn" >Add More</button>
</div>
</li>
<script>
function init(){

$('#broadbandframe').append( $('#broadbandframe2').clone(true));
}
$("#btn").bind("click",function(){
init();
});

$("#broadbandframe").on("change",".selectbroadband",function(){
console.log("success");
var val = $(this).val();
console.log(val);
if(val == 'others'){
console.log("success");
if($(this).siblings("div").children("input").length == 0){
console.log("success");
$(this).siblings("div").append("<input type='text'name='others'class='wid350'/>");
console.log("success");
}else{
//已创建不再创建
}
}
});
init();
</script>

但是所以的都执行到了，就是没有框出来
caofwrxu62864 2016-06-16
  • 打赏
  • 举报
 回复
引用 5 楼 caofwrxu62864 的回复:
[quote=引用 4 楼 u012418098 的回复:] [quote=引用 2 楼 caofwrxu62864 的回复:] [quote=引用 1 楼 u012418098 的回复:] 这个class = 'broadbandframe'都不存在怎么会添加，描述也不清楚...代码也不会贴！你这样发代码别人都不会看,看着都头大
刚刚发现自己贴漏了，可以私聊吗[/quote] 
<!DOCTYPE html >
<html>
<head>
    <meta charset="utf-8" />
    <title>test</title>
</head>
<body>
<div id="main"></div>
<button id="btn" type="button">Add More</button>
<script src="../js/jquery.js"></script>
<script>
    function init(){
        var html = '<div class="broadbandframe"><select class="selectbroadband"><option selected>BB1</option>'
                +'<option>BB2</option><option>BB3</option><option>BB4</option><option>BB5</option><option value="others">Others</option></select>'
                +'<input class="edinput" type="text"/><div class="wid350"></div></div>';
        $('#main').append(html);
    }
    $("#btn").bind("click",function(){
         init();
    });

    $("#main").on("change",".selectbroadband",function(){
        var val = $(this).val();
        if(val === 'others'){
            if($(this).siblings("div").children("input").length === 0){
                $(this).siblings("div").append("<input type='text'name='others'class='wid350'/>");
            }else{
                //已创建不再创建
            }
        }
    });
    init();
</script>
</body>
</html>
我把多余的东西删掉了，自己去改下。[/quote] 你这个怎么没有框出来 [/quote] 文本框的样式怎么变了
caofwrxu62864 2016-06-15
  • 打赏
  • 举报
 回复
引用 1 楼 u012418098 的回复:
这个class = 'broadbandframe'都不存在怎么会添加，描述也不清楚...代码也不会贴！你这样发代码别人都不会看,看着都头大
<div class="broadbandframe"> <li class="msg"><span><font>* </font>Broadband</span> <div class="wid350"> <select id = selectbroadband placeholder="BB1" name="selectbroadband" onchange="testClk()"> <option selected>BB1</option> <option>BB2</option> <option>BB3</option> <option>BB4</option> <option>BB5</option> <option value="others">Others</option> </select> <input placeholder="Effective Date" class="edinput" type="text" onfocus="(this.type='date')" id="date"></div> <em id="broadband_message"></em></li> <li class="msg" > <span> </span> <div class="wid350" id="org"> </div> <em id="date_message" class="txt_new"></em> </li> </div> <div class="addframe"> </div> <li class="msg"> <span> </span> <div class="wid350 myright"> <button type="button" onClick="addmore('broadbandframe')">Add More</button> </div> </li>
caofwrxu62864 2016-06-15
  • 打赏
  • 举报
 回复
引用 1 楼 u012418098 的回复:
这个class = 'broadbandframe'都不存在怎么会添加，描述也不清楚...代码也不会贴！你这样发代码别人都不会看,看着都头大
刚刚发现自己贴漏了，可以私聊吗
jio可 2016-06-15
  • 打赏
  • 举报
 回复
这个class = 'broadbandframe'都不存在怎么会添加，描述也不清楚...代码也不会贴！你这样发代码别人都不会看,看着都头大
jio可 2016-06-15
  • 打赏
  • 举报
 回复
引用 2 楼 caofwrxu62864 的回复:
[quote=引用 1 楼 u012418098 的回复:] 这个class = 'broadbandframe'都不存在怎么会添加，描述也不清楚...代码也不会贴！你这样发代码别人都不会看,看着都头大
刚刚发现自己贴漏了，可以私聊吗[/quote] 
<!DOCTYPE html >
<html>
<head>
    <meta charset="utf-8" />
    <title>test</title>
</head>
<body>
<div id="main"></div>
<button id="btn" type="button">Add More</button>
<script src="../js/jquery.js"></script>
<script>
    function init(){
        var html = '<div class="broadbandframe"><select class="selectbroadband"><option selected>BB1</option>'
                +'<option>BB2</option><option>BB3</option><option>BB4</option><option>BB5</option><option value="others">Others</option></select>'
                +'<input class="edinput" type="text"/><div class="wid350"></div></div>';
        $('#main').append(html);
    }
    $("#btn").bind("click",function(){
         init();
    });

    $("#main").on("change",".selectbroadband",function(){
        var val = $(this).val();
        if(val === 'others'){
            if($(this).siblings("div").children("input").length === 0){
                $(this).siblings("div").append("<input type='text'name='others'class='wid350'/>");
            }else{
                //已创建不再创建
            }
        }
    });
    init();
</script>
</body>
</html>
我把多余的东西删掉了，自己去改下。
PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part1
实例165 可输入字符的下拉菜单 197 实例166 设置下拉列表的默认值 198 实例167 设置下拉列表的样式 199 实例168 下拉列表打开窗口 200 实例169 Tab键在文本域中的体现 201 3.4 表单元素的动态操作 203 实例170 投票...
PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part2
实例165 可输入字符的下拉菜单 197 实例166 设置下拉列表的默认值 198 实例167 设置下拉列表的样式 199 实例168 下拉列表打开窗口 200 实例169 Tab键在文本域中的体现 201 3.4 表单元素的动态操作 203 实例170 投票...
关于js无法获取到下拉列表select的选中状态解决方案之一
问题当我们在html中适应js对应的下拉列表时，但是我们虽然拿到了select，仍然无法通过我们获取到的select对象获取到对应的option的value和text或者是调用select index方法爆出无定义 解决方案 首先我们先进行检查...
JavaScript基础知识与脚本语言总结
Aptana是一个非常强大，开源，JavaScript-focused的AJAX开发IDE。 <2>它的特点包括： JavaScript，HTML，CSS语言的Code Assist功能。 Outline(大纲)：显示JavaScript，HTML和CSS的代码结构。 <3>支持...
HTML、CSS、JavaScript、jQuery
html、CSS、JavaScript、jQuey
JavaScript

87,921

社区成员

224,619

社区内容

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

加载中

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

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

+ 用AI写文章