Question

我有以下代码：

目前结果显示在两个范围标记中，我需要更改哪些内容才能加入这两个标记并在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

我对你的代码采取了一些自由。这是一个涉及较少重复的解决方案：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());
}

Answer 4

尝试

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

Answer 5

目前，结果似乎显示在1个div而不是2个span标记中。但是，要更改结果，示例是显然添加textbox并修改：

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

为：

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

jQuery：在文本框中显示结果

5 个答案: