类似于这样的HTML提交表格,用js拼接后提交,
但是总是顾得了头顾不了屁股的样子。部分代码如下
<div data-role="fieldcontain" class="section">
<label for="shop_close1">
<span class="inputType">选择1span>
label>
<select name="shop_close1" id="shop_close1" data-inline="true" required onchange="spMul.style.display=this.options[this.selectedIndex].id=='day'?'':'none'; goFunction(event,1)">
<option>狗option>
<option>牛option>
<option>猪option>
<option>羊option>
<option>猫option>
<option id="day">一option>
<option id="day">二option>
<option id="day">三option>
<option id="day">四option>
<option id="day">五option>
<option id="day">六option>
select>
div>
<span id="spMul" style="display:none; column-count: 3">
<div data-role="fieldcontain" class="section">
<label class="ui-select">
<span class="inputType">选择2span>
label>
<select name="shop_close2" id="shop_close2" data-line="true" onchange="goFunction(event,2)">
<option>上option><option>下option><option>左option><option>右option>
<option>北option><option>西option><option>右option><option>东option>
select>
div>
span>
div>
<input type="hidden" name="shop_close" id="shop_close" value="" />
javascript部分目前如下
function goFunction(e, n) {
let o="", p="";
if (n === 1) {
o = e.target.value;
}
if (n === 2) {
p = e.target.value;
}
document.getElementById("shop_close").value = o + "・" + p;
}
在这里出现了问题,如果说一开始定义 let o 和 p 为空的话,当触发spMul的时候,id=day的option不能显示 比如选择"三 · 右" 的时候, "三"不能被显示。
而如果不定义变量o p的话,当触发spMul的时候可以显示完整, 但是如果不去触发spMul单,选择第一个select里面的id不为day的option的时候,没有值被传递 (狗牛猪羊猫),
能否请教这一问题的原因如何解决,谢谢!
之前的你提的问题就帮你解决过了,没看我的直接采纳别人的去了。
shop_close的值是shop_close1选中的值及shop_close1选中id=day时选择的shop_close2的值的组合?如果是用下面的
<div data-role="fieldcontain" class="section">
<label for="shop_close1">
<span class="inputType">选择1</span>
</label>
<select name="shop_close1" id="shop_close1" data-inline="true" required onchange="close1Change()">
<option>狗</option>
<option>牛</option>
<option>猪</option>
<option>羊</option>
<option>猫</option>
<option id="day">一</option>
<option id="day">二</option>
<option id="day">三</option>
<option id="day">四</option>
<option id="day">五</option>
<option id="day">六</option>
</select>
</div>
<span id="spMul" style="display:none; column-count: 3">
<div data-role="fieldcontain" class="section">
<label class="ui-select">
<span class="inputType">选择2</span>
</label>
<select name="shop_close2" id="shop_close2" data-line="true" onchange="goFunction()">
<option selected>上</option>
<option>下</option>
<option>左</option>
<option>右</option>
<option>北</option>
<option>西</option>
<option>右</option>
<option>东</option>
</select>
</div>
</span>
</div>
<input type="hidden" name="shop_close" id="shop_close" value="" />
<script>
function close1Change() {
var shop_close1 = document.getElementById('shop_close1');
spMul.style.display = shop_close1.options[shop_close1.selectedIndex].id == 'day' ? '' : 'none';
goFunction()
}
function goFunction() {//不需要传参
var shop_close1 = document.getElementById('shop_close1');
var shop_close2 = document.getElementById('shop_close2');
var isDay = shop_close1.options[shop_close1.selectedIndex].id == 'day';//判断选中的option是否id=day
var s = shop_close1.value + (isDay ? '・' + shop_close2.value : '')//判断选的是id=day再链接shop_close2的值
alert(s)
document.getElementById('shop_close').value = s;
}
</script>
你遇到的问题是因为你在 let o 和 p 为空时,当选择 id=day 的 option 时,不会将 e.target.value 传递给 o,所以最终显示的结果是空的。解决方案:
将初始值设为空字符串,如 let o = '',let p = ''。
只在选择 id=day 的 option 时将值传递给 o。