Question

我有一个动态.field_inputs类的div，这意味着我可以添加任意多个（点击＆＃34;添加更多＆＃34;）。在这个div中，有一个选择下拉列表和一个文本输入。

我在这里有一个JSFiddle：http://jsfiddle.net/rfPXx/

看起来像这样：

<div class='field_inputs'>
   <select>
       <option value="saab">Saab</option>
       <option value="mercedes">Mercedes</option>
       <option value="None">None</option>
   </select>
   <input type='text' name='test1'/>
</div>

如果你在下拉列表中单击Saab，我想要做的就是拥有它，然后输入（在你点击的选择内的相同.field_inputs div内）将填充文本（不一定是但是，与select的名称相同的文本。）这也是默认值，用户仍然可以点击输入并更改文本。

我现在有一些jquery看起来像：

$(".field_inputs").each( function () {

    //Grab the select
    var thisSelect = this.find("select");

    //Grab the input
    var thisInput = this.find("input[type='text]");

    thisSelect.change(function(){

        switch( thisSelect.val() )
        {
        case "Saab":
          thisInput.val("State");
          break;
        case "Mercedes":
          thisInput.val("Country");
          break;
        }

    });
});

但它给了我错误：

Uncaught TypeError: Object #<HTMLDivElement> has no method 'find'

Answer 1

您需要使用jQuery对象$(this)而不是HTML元素this：

var thisSelect = $(this).find("select");
var thisInput = $(this).find("input[type='text]");

那就是说，不需要.each()：

$('.field_inputs').find('select').on('change',function(){
    var self = this,
        fieldInput = $(self).next().get(0);

    switch(self.value){
        case 'saab':
            fieldInput.value = 'State';
            break;
        case 'mercedes':
            fieldInput.value = 'Country';
            break;
    }
});

或者，如果HTML并不总是将输入作为DOM中的下一个元素：

$('.field_inputs').find('select').on('change',function(){
    var self = this,
        fieldInput = $(self).parent().find('input[type="text"]').get(0);

    switch(self.value){
        case 'saab':
            fieldInput.value = 'State';
            break;
        case 'mercedes':
            fieldInput.value = 'Country';
            break;
    }
});

这会做同样的事情，但要快得多。

Here is a working jsFiddle to show what I mean.

Answer 2

正如我在上面的评论中提到的，将this.find更改为$(this).find。 .find()是一个jQuery方法，您尝试在纯JavaScript引用上使用它。并修复案例陈述的情况。

jQuery(function () {
    $(".field_inputs").each(function () {
        //Grab the select
        var thisSelect = $(this).find("select");
        //Grab the input
        var thisInput = $(this).find("input[type='text']");
        thisSelect.change(function () {
            switch (thisSelect.val()) {
                case "saab":
                    thisInput.val("State");
                    break;
                case "mercedes":
                    thisInput.val("Country");
                    break;
            }
        });
    });
});

<强> jsFiddle example

Answer 3

您在选择器输入类型中遗漏了引号：var thisInput = this.find("input[type='text**'**]");
您的switch语句中的值是大写的，而实际值是小写的，这就是您的案例不能通过的原因。

Answer 4

您需要将其更改为$（this）。此引用未设置为当前对象。

抓取div选择并使用选择输入的选项

4 个答案: