CODEWITHSUNDEEP
jquery
Vince P
Vince P

Reputation: 1791

jQuery: display result in text box

I have the following code:

http://jsfiddle.net/uRCL2/1

At the moment the result is shown in two span tags, what do I need change to join the two and show as a value in the text box with the 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">​

Upvotes: 0

Views: 9357

Answers (5)

Dan A.
Dan A.

Reputation: 2924

I took some liberties with your code. Here's a solution that involves less repetition: 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());
}

Upvotes: 1

DarkAjax
DarkAjax

Reputation: 16223

You can save the value for each part in a variable and assign both on change like you can see on this jsfiddle.

Upvotes: 3

mgraph
mgraph

Reputation: 15338

html:

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

js:

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

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

Upvotes: 1

Barry Kaye
Barry Kaye

Reputation: 7761

Currently the results seem to be shown in 1 div not 2 span tags. However to change the results an example is to add the textbox obviously and amend:

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

to:

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

Upvotes: 0

Paul Grimshaw
Paul Grimshaw

Reputation: 21024

Try

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

Upvotes: 0

Related Questions