搶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的選擇和使用選擇輸入

回答

相關問題