从多个下拉列表/复选框/文本框

时间：2017-10-24 18:23:14

标签： javascript jquery html

我有这3个下拉菜单，多个复选框和文本框，我需要在textarea框中填充替代值，我需要做的是按顺序显示所有，用逗号分隔这样的...

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>

3 个答案:

答案 0 :(得分：0)

这是一个潜在的解决方案，它将所需数据存储在每个data-val对象的select属性中，然后调用一个更新函数来抓取所有现有的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>

答案 1 :(得分：0)

选择select，创建翻译对象并收听所有选择框更改。然后，每次更改时，读取所有选择框，并将值收集到一个数组中。这样你就可以使用Array#join来定义＆＃34; glue＆＃34;。

我使用Array#reduce生成集合值数组。

＆＃13;
＆＃13; 
$(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( ', ' ) );
  } );
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

类似的解决方案，但使用字符串文字：

$(document).ready(function () {  	
    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;
        }
      	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;
        }
      

      	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;
        }
      
      	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>

相关问题
最新问题