Javascript 通过单击div-jQuery填充输入

我想通过点击一个包含表单所需全部内容的div来自动填写表单

我的部门-

<div class="ab">
    <ul>
        <li>Sahar Raj</li>
        <li>Address.</li>
        <li>City</li>
        <li>State</li>
        <li>Pin</li>
        <li>9876543210</li>
    </ul>
</div>

萨哈尔拉吉
地址
城市
陈述
别针
9876543210

表格-

<input class="required" type="text" name="name" />
<textarea name="address" class="required"></textarea>
<input class="required" type="text" name="city" />
<select name="state">
    <option value="0">State1</option>
    <option value="1">State2</option>
</select>
<input class="required" type="text" name="pin" />
<input class="required" type="text" name="phone" />

状态1
状态2

---

你知道如何做到这一点吗？谢谢

我猜你的

输入

都是

格式

，而且

ul

的顺序总是正确的。 如果这是真的，您可以使用：

$(function(){
    $('div.ab').on('click',function(){
        $('form input').each(function(index){
            $(this).val($('div.ab ul li:eq(' + index + ')').html());
        });
    });
});

---

您可以为每个

添加id并绑定单击，例如名称：

HTML:

你可以用这个

$('div ul li').click(function () {
    var divIndex = $(this).index();
    var divText = $(this).text();
    $('input').each(function () {
        if ($(this).index() == divIndex) {
            $(this).prop('value', divText);
        }
    });
});

单击一个

，它将读取其索引位置并获取其值/文本。然后查找具有相同索引的

，并为其提供值/文本

最好在输入和li上都有

data-

属性，以避免混淆顺序时出现问题

---

演示您可以混合使用

map

和

每种方法使其工作

请记住，订单对于使其正常工作非常重要。如果您有随机顺序，可以使用数据-*属性存储相关字段信息，然后填充它

$(function () {
    $('div.ab').click(function() {
        var data = $('.ab li').map(function () {
            return this.innerHTML;
            // or return $(this).text();
        }).get();

        $('input').each(function (i) {
            this.value = data[i];
            // or  $(this).val(data[i]);
        });
    });
});


更新

我使用了data-*属性来建立元素之间的关系，因为它们不再是同一种类的元素。这将映射到字段的name属性。还将字段封装在容器中，以便于选择

HTML

<div class="ab">
    <ul>
        <li data-key="name">Sahar Raj</li>
        <li data-key="address">Address.</li>
        <li data-key="city">City</li>
        <li data-key="state">State2</li>
        <li data-key="pin">Pin</li>
        <li data-key="phone">9876543210</li>
    </ul>
</div>
<div class="container">
    <input class="required" type="text" name="name" />
    <textarea name="address" class="required"></textarea>
    <input class="required" type="text" name="city" />
    <select name="state">
        <option value="0">State1</option>
        <option value="1">State2</option>
    </select>
    <input class="required" type="text" name="pin" />
    <input class="required" type="text" name="phone" />
</div>


试试这个：

$(document).ready(function () {
    $(".ab").on("click", function () {
        $(".ab ul >li").each(function (x, value) {
            var text = $(this).html();

            var dom = $("input,textarea,select").get(x);
            $(dom).val(text);
        });
    })
});  

它的顺序是否总是正确的？如果我们使用textarea和select，它将不起作用。如果你想用textarea来代替Input，你必须使用另一种方法。你能帮我吗？非常感谢你的回答。但是选择字段不起作用。你能告诉我如何让它工作吗？你的选项列表中没有一个叫做State的选项。您只有
State1
和
State2
。。很高兴能帮忙：）\
<div class="ab">
    <ul>
        <li data-key="name">Sahar Raj</li>
        <li data-key="address">Address.</li>
        <li data-key="city">City</li>
        <li data-key="state">State2</li>
        <li data-key="pin">Pin</li>
        <li data-key="phone">9876543210</li>
    </ul>
</div>
<div class="container">
    <input class="required" type="text" name="name" />
    <textarea name="address" class="required"></textarea>
    <input class="required" type="text" name="city" />
    <select name="state">
        <option value="0">State1</option>
        <option value="1">State2</option>
    </select>
    <input class="required" type="text" name="pin" />
    <input class="required" type="text" name="phone" />
</div>

$(function () {
    $('div.ab').click(function () {
        $('.container').children().each(function() {
             // Get the corresponding key value from li.
             var $this =  $(this),
                 key = $this.attr('name');
             // Find the li with that key
            var txt = $('.ab li[data-key="'+ key +'"]').text();

            $this.val(txt);
        });
    });
});

var counter = 0;
$("#clickme").click(function() {
   $("#list li").each(function() {
       var text = $(this).text();  
       $("input:eq(" + counter + ")").val(text);
       counter++;
    });
});

$(document).ready(function () {
    $(".ab").on("click", function () {
        $(".ab ul >li").each(function (x, value) {
            var text = $(this).html();

            var dom = $("input,textarea,select").get(x);
            $(dom).val(text);
        });
    })
});