4个选项应该写入textarea每次更改都正确
问题描述:
我加载的jq库是jq_min_3.1.1.js。如果有问题,broser是IE11。我的脚本正好在html body中的表单之下。4个选项应该写入textarea每次更改都正确
我需要的是:4选择的最后一个状态应写入之后中的任何一个选项中。
我的审判最后的状态:
http://jsbin.com/comolifeyo/1/edit?html,js,console,output
每个选择都有共同<option value="">select</option>
。 例如A | - | X | -
意味着,选择2 & 4未被选择或重新选择以中止先前的选择(不选择)。
重要的是,如果选择1被选定为一个,但随后选定为选择(不选择);然后textarea的改变应该从一个到-
我确定用PHP,但我不知道的jQuery。下面的代码是从我从SO发现的代码改编而来的。我做了F12和控制台没有错误,但是我的textarea是空的。
我试过的是以下。看起来$imploded = $arr_out.join(' | ');
没有设置,因为$ arr_out没有设置。 (在那个点上的控制台日志什么都不给)。
出了什么问题?为什么它错了?如果jq图书馆没问题,解决方案是否可以交叉浏览?
感谢
<form method="post" action="#" name="myform" id="myform">
<select name="select1" id="select1" size="1">
<option value="">select</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
<select name="select2" id="select2" size="1">
<option value="">select</option>
<option value="1">q1</option>
<option value="2">q2</option>
<option value="3">q3</option>
</select>
<select name="select3" id="select3" size="1">
<option value="">select</option>
<option value="1">X</option>
<option value="2">Y</option>
<option value="3">Z</option>
</select>
<select name="select4" id="select4" size="1">
<option value="">select</option>
<option value="1">q7</option>
<option value="2">q8</option>
<option value="3">q9</option>
</select>
<textarea name="first_paste" id="first_paste" disabled></textarea>
</form>
<script>
$(document).ready(function() {
var $fields = ['#select1','#select2','#select3','#select4'];
var $arr_out = [];
$.each($fields, function(key,val)
{
$(val).change(function()
{
if($(val).val() === "")
{
$arr_out[key] = '-';
// console.log($arr_out.join(' | '));
}
else
{
$arr_out[key] = ($(val + ' option:selected').text());
// console.log($arr_out.join(' | '));
}
});
})
// console.log($arr_out.join(' | '));
$imploded = $arr_out.join(' | ');
$('#first_paste').text($imploded);
});
</script>
答
<form method="post" action="#" name="myform" id="myform">
<select name="select1" id="select1" size="1">
<option value="" selected="selected">select</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
<select name="select2" id="select2" size="1">
<option value="" selected="selected">select</option>
<option value="1">q1</option>
<option value="2">q2</option>
<option value="3">q3</option>
</select>
<select name="select3" id="select3" size="1">
<option value="" selected="selected">select</option>
<option value="1">X</option>
<option value="2">Y</option>
<option value="3">Z</option>
</select>
<select name="select4" id="select4" size="1">
<option value="" selected="selected">select</option>
<option value="1">q7</option>
<option value="2">q8</option>
<option value="3">q9</option>
</select>
<textarea name="first_paste" id="first_paste" disabled></textarea>
</form>
$(document).ready(function() {
var $fields = ['#select1','#select2','#select3','#select4'];
var $arr_out = [];
$.each($fields, function(key,val)
{
if($(val).find(":selected").text() == "select"){
console.log($(val).find(':selected').text());
$arr_out[key] = '-';
}
$("#first_paste").html($arr_out +"," + "");
console.log(key,val);
$(val).change(function()
{
switch (key) {
case 0:
if($(val).find(":selected").text() == "select"){
console.log($(val).find(':selected').text());
$arr_out[key] = '-';
break;
}
else{
$arr_out[key] = $(val).find(":selected").text();
break;
}
case 1:
if($(val).find(":selected").text() == "select"){
console.log($(val).find(':selected').text());
$arr_out[key] = '-';
break;
}
else{
$arr_out[key] = $(val).find(":selected").text();
break;
}
case 2:
if($(val).find(":selected").text() == "select"){
console.log($(val).find(':selected').text());
$arr_out[key] = '-';
break;
}
else{
$arr_out[key] = $(val).find(":selected").text();
break;
}
case 3:
if($(val).find(":selected").text() == "select"){
console.log($(val).find(':selected').text());
$arr_out[key] = '-';
break;
}
else{
$arr_out[key] = $(val).find(":selected").text();
break;
}
}
console.log($arr_out);
$("#first_paste").html($arr_out +"," + "");
});
})
});
我的疑问,**重要的是,如果选择1被选为A,但后来选择为选择(无选择)写道;那么textarea应该从A更改为 - 。**您删除了'if else'语句。请仔细阅读这些问题。 –
更新了上面的代码,这里是工作小提琴 http://jsfiddle.net/o2gxgz9r/2522/ – Krishna9960
非常感谢你。 **请你也告诉我我的代码有什么问题吗?**我不喜欢只复制粘贴一个工作代码并继续前进。 –