jQueryの：テキストボックスに表示結果

Question

私は、次のコードを持っている。その結果、2つのspanタグに示されている時点では

http://jsfiddle.net/uRCL2/1

、私はのような2つのショーに参加するために変更する必要がありますか何を値はid=skuのテキストボックスにありますか？

---

JS：

$("#options").change(function(){ 
switch($(this).val()){ 
    case "3370": 
     $(".display_text_here").text('TB'); 
    break; 
    case "3371": 
     $(".display_text_here").text('LT'); 
    break; 
    case "3375": 
     $(".display_text_here").text('LTR'); 
    break; 
    case "3372": 
      $(".display_text_here").text('BO'); 
    break; 
    case "3373": 
     $(".display_text_here").text('MC'); 
    break; 
    case "3374": 
     $(".display_text_here").text('NC'); 
    break; 
    case "3376": 
      $(".display_text_here").text('STA'); 
    break; 

    } 
}); 
$("#options2").change(function(){ 
    switch($(this).val()){ 
    case "3423": 
      $(".display_text_here2").text('12'); 
    break; 
    case "3424": 
     $(".display_text_here2").text('24'); 
    break; 
    case "3425": 
     $(".display_text_here2").text('48'); 
    break; 

} 
}); 

HTML：

<select id="options"> 
<option value="">Choose...</option> 
<option value="3370" >Tight Buffered </option> 
<option value="3371" >Loose Tube 900um </option> 
<option value="3375" >Loose Tube 2mm </option> 
<option value="3372" >Break-Out 2mm </option> 
<option value="3373" >Micro Cable 2mm </option> 
<option value="3374" >Nano Cable 900um </option>              
<option value="3376" >Steel Tape Armoured 900um </option> 
</select> 
<select id="options2"> 
    <option value="">Choose...</option> 
    <option value="3423" >12 MC</option> 
    <option value="3424" >24 MC</option> 
    <option value="3425" >48 MC</option> 
</select> 
<br /> 

<span class="display_text_here"></span><span class="display_text_here2"></span> 
<br /> 

<input type="text" id="sku">​ 

Answer 1

あなたは、変数の各部分の値を保存し、あなたが見ることができるように変更の両方を割り当てることができますon this jsfiddle。

Answer 2

HTML：

<input type="text" name="sku" id="sku"/> 

JS：

#options 
    case "3370": 
     $("#sku").val('TB'+$("#sku").val()); 
     break; 

#options2 
    $("#sku").val($("#sku").val()+'24'); 

Answer 3

が

$(".display_text_here").append('TB'); 

Answer 4

を試してみてください現在の結果は、1つのdivない2 spanタグに示されているように見えます。

$(".display_text_here").text('TB'); 

：しかし例は明らかにtextboxを追加し、修正することで、結果を変更する

$("#sku").val('TB'); 

Answer 5

私はあなたのコードにいくつかの自由を取りました。ここでは以下の繰り返しを必要とするソリューションがあります：http://jsfiddle.net/ReeaN/

HTML

<select id="options"> 
    <option value="">Choose...</option> 
    <option value="3370" data-code="TB" >Tight Buffered </option> 
    <option value="3371" data-code="LT">Loose Tube 900um </option> 
    <option value="3375" data-code="LTR">Loose Tube 2mm </option> 
    <option value="3372" data-code="BO">Break-Out 2mm </option> 
    <option value="3373" data-code="MC">Micro Cable 2mm </option> 
    <option value="3374" data-code="NC">Nano Cable 900um </option> 
    <option value="3376" data-code="STA">Steel Tape Armoured 900um </option> 
</select> 
<select id="options2"> 
    <option value="">Choose...</option> 
    <option value="3423">12 MC</option> 
    <option value="3424">24 MC</option> 
    <option value="3425">48 MC</option> 
</select> 
<br /> 

<span class="display_text_here"></span><span class="display_text_here2"></span> 
<br /> 

<input type="text" id="sku"> 

Javascriptを：

$("#options").change(function(){ 
    var val = ''; 
    if ($(this).val() != '') { 
     val = $(this).find('option:selected').data('code'); 
    } 
    $(".display_text_here").text(val); 
    updateDisplay(); 
}); 
$("#options2").change(function(){ 
    var val = ''; 
    if ($(this).val() != '') { 
     val = $(this).find('option:selected').text().split(' ')[0]; 
    } 
    $(".display_text_here2").text(val); 
    updateDisplay(); 
}); 

function updateDisplay() { 
    $('#sku').val($(".display_text_here").text() + $(".display_text_here2").text()); 
}