尝试动态添加输入类型文本框,方法是使用带选项的select标记选择.answer框中需要创建的文本框。我在这里错过了什么?
请不要告诉我使用.on而不是bind。谢谢!
这是jsfiddle:https://jsfiddle.net/otjuhp59/
代码:
$(document).ready(function(){
$("#create-skill").unbind("click");
$("#create-language").unbind("click");
$("#create-skill").bind("click", addSkill);
$("#create-language").bind("click",addLanguage);
var language=$("#lang").val();
var skill=$("#skill").val();
addSkill(skill);
addLanguage(language);
});
function addSkill(s){
$(".answer-box").html("");
for(var i=1; i<=s; i++)
{
var skillContent="Skill "+i+"<br /><input type='text' id='txt1"+i+"' name='txt1"+i+"' value='' placeholder='Please enter Skill' /><br />";
$(".answer-box").append(skillContent);
}
}
function addLanguage(l){
$(".answer-box").html("");
for (var j=1; j<=l; j++)
{
var langContent="Language "+j+"<br /><input type='text' id='txt2"+j+"' name='txt2"+j+"' value='' placeholder='Please enter laanguage' /><br />";
$(".answer-box").append(langContent);
}
}
HTML:
<div class="select-container">
<div class="user-input-box">
<p>Select number of Skills:</p>
<select class="skill" id="skill">
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
<option value="1">4</option>
</select>
<input type="button" id="create-skill" name="create-skill" value="Create Skill" />
<p>Select number of Languages:</p>
<select class="lang" id="lang">
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
<option value="1">4</option>
</select>
<input type="button" id="create-language" name="create-language" value="Create Language" />
</div>
</div>
<div class="answer-box">
</div>
</div>
CSS:
.select-container{border:1px solid black; min-width:200px; min-height:100px; float:left;}
.user-input-box{width:180px; min-height:100px; float:left; margin-left:5px;}
.answer-box{border:1px solid black; min-width:400px; min-height:100px; float:left; margin-left:100px;}
答案 0 :(得分:1)
需要进行少量修改
希望此代码段和评论有用
<强> JS 强>
$(document).ready(function(){
// remove all the bind & unbind
// create input on click of button create-skill
$("#create-skill").on('click',function(){
// get the value of selected option
var s = $("#skill").val();
$(".answer-box").html("");
for(var i=1; i<=s; i++)
{
var skillContent="Skill "+i+"<br /><input type='text' id='txt1"+i+"' name='txt1"+i+"' value='' placeholder='Please enter Skill' /><br />";
$(".answer-box").append(skillContent);
}
})
//rest of the code
})
<强> HTML 强>
在每个选项中加上单独的值
<select class="skill" id="skill">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
答案 1 :(得分:0)
当您更改下拉列表并单击按钮时,您的技能和语言下拉列表的值不会通过。
你遇到的两个问题是:
您实际上并没有告诉函数获取新值
下拉选项的值都设置为“1”,只有 刚刚更新了文字标签。
https://jsfiddle.net/43cxmx3k/16/
JS:
function addSkill(s) {
var s = $("#skill").val();
$(".answer-box").html("");
for (var i = 1; i <= s; i++) {
var skillContent = "Skill " + i + "<br /><input type='text' id='txt1" + i + "' name='txt1" + i + "' value='' placeholder='Please enter Skill' /><br />";
$(".answer-box").append(skillContent);
}
}
function addLanguage() {
var l = $("#lang").val();
$(".answer-box").html("");
for (var j = 1; j <= l; j++) {
var langContent = "Language " + j + "<br /><input type='text' id='txt2" + j + "' name='txt2" + j + "' value='' placeholder='Please enter laanguage' /><br />";
$(".answer-box").append(langContent);
}
}
HTML:
<select class="skill" id="skill">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select class="lang" id="lang">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>