複数のドロップダウン/チェックボックス/テキストボックスからテキストエリアにデータを入力する

Question

私はこれらの3つのドロップダウンメニュー、複数のチェックボックス、およびテキストエリアボックスに代替値を入力する必要があるテキストボックスを用意しています。 、基本的にはどのようなことが最後に選択されたものは何でもして数字を置き換えるだ起こって...このようなコンマで

4300013076、10、563、2、6532

を分離しました。チェックボックスやテキストボックスを追加する方法をまとめていても、私はこれで本当に新しいので、いくつかの助けを使うことができます。

$(document).ready(function() { 
 

 
$('#element_45').change(function() { 
 
    var myValue = $(this).val(); 
 
    switch (myValue) { 
 
    case '6': 
 
     $('textarea[id="element_247"]').val('4300013076'); 
 
     break; 
 
    case '12': 
 
     $('textarea[id="element_247"]').val('4300013077'); 
 
     break; 
 
    case '13': 
 
     $('textarea[id="element_247"]').val('4300013078'); 
 
     break; 
 
    case '14': 
 
     $('textarea[id="element_247"]').val('4300013492'); 
 
     break; 
 
    } 
 
}); 
 
}); 
 
$(document).ready(function() { 
 
$('#element_46').change(function() { 
 
    var myValue = $(this).val(); 
 
    switch (myValue) { 
 
    case '20': 
 
     $('textarea[id="element_247"]').val('10'); 
 
     break; 
 
    case '21': 
 
     $('textarea[id="element_247"]').val('14'); 
 
     break; 
 
    case '22': 
 
     $('textarea[id="element_247"]').val('17'); 
 
     break; 
 
    case '23': 
 
     $('textarea[id="element_247"]').val('18'); 
 
     break; 
 
    } 
 
}); 
 
}); 
 
$(document).ready(function() { 
 
$('#element_47').change(function() { 
 
    var myValue = $(this).val(); 
 
    switch (myValue) { 
 
    case '30': 
 
     $('textarea[id="element_247"]').val('561'); 
 
     break; 
 
    case '31': 
 
     $('textarea[id="element_247"]').val('562'); 
 
     break; 
 
    case '32': 
 
     $('textarea[id="element_247"]').val('563'); 
 
     break; 
 
    case '33': 
 
     $('textarea[id="element_247"]').val('564'); 
 
     break; 
 
    } 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="element_45"> 
 
<option value="" >None</option> 
 
<option value="6">text1</option> 
 
<option value="12">text2</option> 
 
<option value="13">text3</option> 
 
<option value="14">text4</option> 
 
</select> 
 
<select id="element_46"> 
 
<option value="" >None</option> 
 
<option value="20">text5</option> 
 
<option value="21">text6</option> 
 
<option value="22">text7</option> 
 
<option value="23">text8</option> 
 
</select> 
 
<select id="element_47"> 
 
<option value="" >None</option> 
 
<option value="30">text9</option> 
 
<option value="31">text10</option> 
 
<option value="32">text11</option> 
 
<option value="33">text12</option> 
 
</select> 
 
<input id="element_490" name="element_490" class="element text medium" value=""/> 
 
<input id="element_227_1" name="element_227_1" class="element checkbox" type="checkbox" value="1" /> 
 
<label class="choice" for="element_227_1">Yes</label> 
 
<textarea id="element_247"></textarea>

Answer 1

翻訳オブジェクトを作成し、selectを選択することで、すべての選択ボックスの変更に耳を傾けます。次に、それぞれの変更で、すべての選択ボックスを読み、値を配列に集めます。そうすれば、 "接着剤"を定義できるArray#joinを使うことができます。

私はArray#reduceを使用してコレクション値配列を生成します。

$(document).ready(function() { 
 
    // collect selectboxes - respecting the order 
 
    const selectBoxes = [ 
 
    $('#element_45'), 
 
    $('#element_46'), 
 
    $('#element_47'), 
 
    ]; 
 
    const textbox = $('textarea#element_247'); 
 
    
 
    // translate values 
 
    const translateValues = { 
 
    // possible #element_45 values 
 
    '45': { 
 
     '6': '4300013076', 
 
     '12': '4300013077', 
 
     '13': '4300013078', 
 
     '14': '4300013492', 
 
    }, 
 
    // possible #element_46 values 
 
    '46': { 
 
     '20': '10', 
 
     '21': '14', 
 
     '22': '17', 
 
     '23': '18', 
 
    }, 
 
    // possible #element_47 values 
 
    '47': { 
 
     '30': '561', 
 
     '31': '562', 
 
     '32': '563', 
 
     '33': '564', 
 
    }, 
 
    }; 
 

 
    // Listen to all select changes 
 
    $('select').change(function() { 
 
    const values = selectBoxes.reduce((collectedValues, box) => { 
 
     // Convert value to number 
 
     const val = box.val(); 
 
     
 
     // Skip empty boxes 
 
     if (val == 0) { 
 
     return collectedValues; 
 
     } 
 
     
 
     // Get id of box 
 
     const id = box.attr('id').split('_')[ 1 ]; 
 

 
     // Get value and add to collection 
 
     const t = translateValues[ id ][ val ]; 
 
     // Only add value, when it is defined in our object 
 
     if (t) { 
 
     collectedValues.push(t); 
 
     } 
 
     
 
     return collectedValues; 
 
    }, []); 
 
    
 
    // Set textarea value 
 
    textbox.val(values.join(', ')); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="element_45"> 
 
    <option value="" >None</option> 
 
    <option value="6">text1</option> 
 
    <option value="12">text2</option> 
 
    <option value="13">text3</option> 
 
    <option value="14">text4</option> 
 
</select> 
 
<select id="element_46"> 
 
    <option value="" >None</option> 
 
    <option value="20">text5</option> 
 
    <option value="21">text6</option> 
 
    <option value="22">text7</option> 
 
    <option value="23">text8</option> 
 
</select> 
 
<select id="element_47"> 
 
    <option value="" >None</option> 
 
    <option value="30">text9</option> 
 
    <option value="31">text10</option> 
 
    <option value="32">text11</option> 
 
    <option value="33">text12</option> 
 
</select> 
 
<textarea id="element_247"></textarea>

Answer 2

ここでは、各selectオブジェクトのdata-val属性に必要なデータを格納する潜在的な解決策だし、すべての既存のdata-valの属性をつかむ更新機能を呼び出し、配列にそれらを置きます、テキストボックスでそれらを結合します。

$(document).ready(function() { 
 

 
    $('#element_45').change(function() { 
 
     var myValue = $(this).val(); 
 
     switch (myValue) { 
 
     case '6': 
 
      $(this).attr('data-val','4300013076'); 
 
      break; 
 
     case '12': 
 
      $(this).attr('data-val','4300013077'); 
 
      break; 
 
     case '13': 
 
      $(this).attr('data-val','4300013078'); 
 
      break; 
 
     case '14': 
 
      $(this).attr('data-val','4300013492'); 
 
      break; 
 
     } 
 
     update(); 
 
    }); 
 

 
    $('#element_46').change(function() { 
 
     var myValue = $(this).val(); 
 
     switch (myValue) { 
 
     case '20': 
 
      $(this).attr('data-val', '10'); 
 
      break; 
 
     case '21': 
 
      $(this).attr('data-val', '14'); 
 
      break; 
 
     case '22': 
 
      $(this).attr('data-val', '17'); 
 
      break; 
 
     case '23': 
 
      $(this).attr('data-val', '18'); 
 
      break; 
 
     } 
 
     update(); 
 
    }); 
 

 
    $('#element_47').change(function() { 
 
     var myValue = $(this).val(); 
 
     switch (myValue) { 
 
     case '30': 
 
      $(this).attr('data-val', '561'); 
 
      break; 
 
     case '31': 
 
      $(this).attr('data-val', '562'); 
 
      break; 
 
     case '32': 
 
      $(this).attr('data-val', '563'); 
 
      break; 
 
     case '33': 
 
      $(this).attr('data-val', '564'); 
 
      break; 
 
     } 
 
     update(); 
 
    }); 
 

 
    function update() { 
 
     var allSelects = []; 
 
     $('select').each(function() { 
 
     if ($(this).attr('data-val')) 
 
      allSelects.push($(this).attr('data-val')); 
 
     }) 
 
     $('textarea[id="element_247"]').val(allSelects.join(', ')); 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="element_45"> 
 
    <option value="" >None</option> 
 
    <option value="6">text1</option> 
 
    <option value="12">text2</option> 
 
    <option value="13">text3</option> 
 
    <option value="14">text4</option> 
 
</select> 
 
<select id="element_46"> 
 
    <option value="" >None</option> 
 
    <option value="20">text5</option> 
 
    <option value="21">text6</option> 
 
    <option value="22">text7</option> 
 
    <option value="23">text8</option> 
 
</select> 
 
<select id="element_47"> 
 
    <option value="" >None</option> 
 
    <option value="30">text9</option> 
 
    <option value="31">text10</option> 
 
    <option value="32">text11</option> 
 
    <option value="33">text12</option> 
 
</select> 
 
<textarea id="element_247"></textarea>

Answer 3

同様のソリューションが、使用して文字列リテラル：

$(document).ready(function() { \t 
 
    var value45 = '', value46 = '', value47 = ''; 
 
    var textArea = $('textarea[id="element_247"]'); 
 
    
 
    $('#element_45').change(function() { 
 
     var myValue = $(this).val(); 
 
     switch (myValue) { 
 
      case '6': 
 
       value45 = '4300013076'; 
 
       break; 
 
      case '12': 
 
       value45 = '4300013077'; 
 
       break; 
 
      case '13': 
 
       value45 = '4300013078'; 
 
       break; 
 
      case '14': 
 
       value45 = '4300013492'; 
 
       break; 
 
     } 
 
     \t textArea.val(`${value45}, ${value46}, ${value47}`); 
 
    }); 
 

 
    $('#element_46').change(function() { 
 
     var myValue = $(this).val(); 
 
     
 
     switch (myValue) { 
 
      case '20': 
 
       value46 = '10'; 
 
       break; 
 
      case '21': 
 
       value46 = '14'; 
 
       break; 
 
      case '22': 
 
       value46 = '17'; 
 
       break; 
 
      case '23': 
 
       value46 = '18'; 
 
       break; 
 
     } 
 
     
 

 
     \t textArea.val(`${value45}, ${value46}, ${value47}`); 
 
    }); 
 

 
    $('#element_47').change(function() { 
 
     var myValue = $(this).val(); 
 
     
 
     switch (myValue) { 
 
      case '30': 
 
       value47 = '561'; 
 
       break; 
 
      case '31': 
 
       value47 = '562'; 
 
       break; 
 
      case '32': 
 
       value47 = '563'; 
 
       break; 
 
      case '33': 
 
       value47 = '564'; 
 
       break; 
 
     } 
 
     
 
     \t textArea.val(`${value45}, ${value46}, ${value47}`); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="element_45"> 
 
    <option value="" >None</option> 
 
    <option value="6">text1</option> 
 
    <option value="12">text2</option> 
 
    <option value="13">text3</option> 
 
    <option value="14">text4</option> 
 
</select> 
 
<select id="element_46"> 
 
    <option value="" >None</option> 
 
    <option value="20">text5</option> 
 
    <option value="21">text6</option> 
 
    <option value="22">text7</option> 
 
    <option value="23">text8</option> 
 
</select> 
 
<select id="element_47"> 
 
    <option value="" >None</option> 
 
    <option value="30">text9</option> 
 
    <option value="31">text10</option> 
 
    <option value="32">text11</option> 
 
    <option value="33">text12</option> 
 
</select> 
 
<textarea id="element_247"></textarea>