<ul class="shurukuang">
<li>
<p>字母1</p>
<input class="textA" type="text" />
</li>
<li>
<p>字母2</p>
<input class="textB" type="text" />
</li>
</ul>
<p>请从下方字母框中选择字母</p>
<ul class="xuanze choose">
<li>A</li>
<li>Ai</li>
<li>An</li>
<li>Ao</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>Ei</li>
<li>En</li>
<li>Er</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li>M</li>
<li>N</li>
<li>O</li>
<li>Ong</li>
<li>Ou</li>
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
<li>T</li>
<li>W</li>
<li>Wu</li>
<li>Y</li>
<li>Ye</li>
<li>Yi</li>
<li>Yin</li>
<li>You</li>
<li>Yu</li>
<li>Yue</li>
<li>Yun</li>
<li>Z</li>
</ul>
<button class="tijiao">提交</button>
第一次选则ul li(会有一个背景改变的样式 )单击提交,如果第一个input没有内容就显示在第一个中,再次选择ul li(选泽是会有背景改变) 点提交 另一个显示在第二个input中
var a,b;
$('li').click(function(){
if(!a)
a = $(this).text();
if(!b)
b = $(this).text();
})
$('.tijiao').click(function(){$('.textA').val(a||'');$('.textB').val(b||'')})
<html>
<style>
.select{ background: #A1A1A1 }
</style>
<script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
<body>
<ul class="shurukuang">
<p>
<p>字母1</p>
<input class="textA" type="text" />
</p>
<p>
<p>字母2</p>
<input class="textB" type="text" />
</p>
</ul>
<p>请从下方字母框中选择字母</p>
<ul class="xuanze choose">
<p>A</p>
<p>Ai</p>
<p>An</p>
<p>Ao</p>
<p>B</p>
<p>C</p>
<p>D</p>
//本处省略N项
<p>Z</p>
</ul>
<button class="tijiao">提交</button>
</body>
<script>
$(".xuanze li").on("click",function(){
$("ul.xuanze li.select").removeClass("select");
$(this).addClass("select");
})
$(".tijiao").on("click",function(){
var value = $("li.select").text();
var inputs = $(".shurukuang input")
for(ipt in inputs){
if(inputs.eq(ipt).val() == "")
{
inputs.eq(ipt).val(value);
$("ul.xuanze li.select").removeClass("select");
break;
}
}
})
</script>
</html>