抢div的选择和使用选择输入

-2

我有类.field_inputs是动态的，这意味着我可以添加多达我想一个div选项（上点击“添加更多”）。在这个div里面，有一个选择下拉菜单和一个文本输入。抢div的选择和使用选择输入

我这里有一个的jsfiddle：3210

它看起来像这样：

<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>

我想要做的是，如果你在下拉菜单中点击萨博，则输入（同样.field_inputs DIV作为选择你点击）内将与文本（不一定是相同的文本选择的名字，虽然被填充。）这还仅仅只是默认情况下，用户应该仍然能够点击输入并更改文字。

我有一些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'

来源

2014-04-01 the_

将'this.find'改为'$（this）.find'。开关/大小写区分大小写，就像JavaScript的其余部分一样，所以没有任何匹配“Saab”或“Mercedes”，因为实际值是小写字母。 – j08691

@the_ - 你有资本'Saab'和'Mercedes'，但在拨弄它们是小写。 JavaScript区分大小写。 – PlantTheIdea

http://jsfiddle.net/vp_arth/rfPXx/11/ –

你需要使用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.

来源

2014-04-01 21:11:57 PlantTheIdea

您需要更改此设置为$（本）。这个参考没有被设置为当前对象。

来源

2014-04-01 21:08:32 pj013

正如我在上述评论中提到的，将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

来源

2014-04-01 21:11:32 j08691

你错过了你的选择输入型报价：var thisInput = this.find("input[type='text**'**]");
在switch语句中的值资本，而实际值较低的情况下，这就是为什么你的情况不经过。

来源

2014-04-01 21:19:38

抢div的选择和使用选择输入

回答

相关问题