Question

我有以下代码，我想制作一种地址列表。当我点击“kies klant”时，我想列出姓名，地址和电话号码。就像我有1,2,3。当我选择它时，它必须出现在三个选择字段中。我只是想不出来怎么样？

<html> 

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
    $(window).load(function(){
        $('.btnChoice').on('click', function(){
            $('#divChoices').show()
            thefield = $(this).prev()
            $('.btnselect').on('click', function(){
                theselected = $(this).prev()
                thefield.val( theselected.val() )
                $('#divChoices').hide()
            })
        })

        $('#divChoices').css({
            'border':'2px solid red',
            'position':'fixed',
            'top':'100',
            'left':'200',
            'display':'none'
        })
    });
</script>
</head>

<body>

<div class="divform">
<input type="text" id="sku1" name="sku1">
<input type="text" id="sku2" name="sku2">
<input type="text" id="sku3" name="sku3">
<button id="choice1" class="btnChoice">Kies klant</button>
</div>

<div id="divChoices">
Kies hier uw klant: 

<br>
<input type="text" name="ch1" id="ch1" value="1" >
<input type="text" id="ch2" name="ch2" value="2">
<input type="text" id="ch3" name="ch3" value="3">
<button id="btnsel2" class="btnselect">Select</button>

</div>


</body>

</html>

Answer 1

当单击“选择”按钮时，您可以使用主窗体中的输入迭代并映射每个输入。此点击事件如下所示：

$('.btnselect').on('click', function() {
     //cache this for performance
     var mainForm = $(".divform");
     //inputs in #divChoices
     var inputs = $(this).parent("div").find("input[type=text]");
     //iterate and assign
     inputs.each(function(i) {
       mainForm.find("input")[i].value = $(this).val();
     });
     //or simply do this :
     //$("#sku1").val($("#ch1").val())
     //$("#sku2").val($("#ch2").val())
     //$("#sku3").val($("#ch3").val())
     $('#divChoices').hide()
 });

以下是演示：http://jsfiddle.net/hungerpain/78uw5/

使用Jquery隐藏选择表单

1 个答案: