根据选择框选择定义隐藏字段值答案

【问题标题】：Defining hidden field value based on select box selection根据选择框选择定义隐藏字段值
【发布时间】：2018-08-21 19:20:43
【问题描述】：

是否有一种 jQuery 方法可以使用 SELECT 框中的“开始于”将变量传递给隐藏字段？到目前为止，这就是我所拥有的脚本，但我真的只需要它来查找第一个字母。

例如，如果用户选择“键盘-原声钢琴”，我们需要在隐藏字段“referralCode”中通过“KeyboardMag”。到目前为止，这是我所拥有的：

$( document ).ready(function() {
var refcode={
      Guitars     : "GuitarsMag",
      Keyboards   : "KeyboardMag",
      Drums       : "DrumMag",
      Microphones : "MusicMag"
}
$("#productsMusical").change(function(e){ 
      $('[name="referralCode"]').val(  refcode[ $(this).val() ] )
})
});

<input name="referralCode" value="" id="referralCode" type="hidden">

<select id="productsMusical" name="productsMusical">
  <option value="" selected="selected">--Please Select--</option>
  <option value="Guitars - Acoustic">Guitars - Acoustic</option>
  <option value="Guitars - Electric">Guitars - Electric</option>
  <option value="Guitars - Bass">Guitars - Bass</option>
  <option value="Keyboards - Acoustic Piano">Keyboards - Acoustic Piano</option>
  <option value="Keyboards - Digital Piano">Keyboards - Digital Piano</option>
  <option value="Keyboards - Synth">Keyboards - Synth</option>
  <option value="Drums - Acoustic">Drums - Acoustic</option>
  <option value="Drums - Electric">Drums - Electric</option>
  <option value="Drums - Band">Drums - Band</option>
  <option value="Microphones - Vocal">Microphones - Vocal</option>
  <option value="Microphones - Vocal Headset">Microphones - Vocal Headset</option>
  <option value="Microphones - Instrument">Microphones - Instrument</option>
</select>

【问题讨论】：

标签： javascript jquery forms drop-down-menu hidden-field

【解决方案1】：

您可以将值拆分为“ - ”，因为这似乎是下拉值的统一部分。

$(document).ready(function() {
  var refcode = {
    Guitars: "GuitarsMag",
    Keyboards: "KeyboardMag",
    Drums: "DrumMag",
    Microphones: "MusicMag"
  }
  
  $("#productsMusical").change(function(e) {
    var [ refferalCode, other ] = e.target.value.split(' - ');
    
    if ( e.target.value ) {
      $('#referralCode').val(refcode[refferalCode]);
    } else {
      $('#referralCode').val('');
    }
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="referralCode" value="" id="referralCode">

<select id="productsMusical" name="productsMusical">
  <option value="" selected="selected">--Please Select--</option>
  <option value="Guitars - Acoustic">Guitars - Acoustic</option>
  <option value="Guitars - Electric">Guitars - Electric</option>
  <option value="Guitars - Bass">Guitars - Bass</option>
  <option value="Keyboards - Acoustic Piano">Keyboards - Acoustic Piano</option>
  <option value="Keyboards - Digital Piano">Keyboards - Digital Piano</option>
  <option value="Keyboards - Synth">Keyboards - Synth</option>
  <option value="Drums - Acoustic">Drums - Acoustic</option>
  <option value="Drums - Electric">Drums - Electric</option>
  <option value="Drums - Band">Drums - Band</option>
  <option value="Microphones - Vocal">Microphones - Vocal</option>
  <option value="Microphones - Vocal Headset">Microphones - Vocal Headset</option>
  <option value="Microphones - Instrument">Microphones - Instrument</option>
</select>

【讨论】：

【解决方案2】：

您可以使用原生的String.indexOf() 方法来检查字符串是否包含子字符串。

$( document ).ready(function() {
  var refcode={
      Guitars     : "GuitarsMag",
      Keyboards   : "KeyboardMag",
      Drums       : "DrumMag",
      Microphones : "MusicMag"
  }
  $("#productsMusical").on("change", function(e){
     let hiddenVal = ""; 
      
     // Determine the correct value for the hidden field
     // based on whether the selected option contains the tested string
     // (.indexOf returns -1 when the string can't be found)
     if($("#productsMusical").val().indexOf('Guitars') > -1){
       hiddenVal = "GuitarsMag";
     } else if($("#productsMusical").val().indexOf('Keyboards') > -1){
       hiddenVal = "KeyboardMag";     
     } else if($("#productsMusical").val().indexOf('Drums') > -1){
       hiddenVal = "DrumMag";     
     } else {
       hiddenVal = "MusicMag";     
     }
  
      $('[name="referralCode"]').val(hiddenVal);
      console.log($('[name="referralCode"]').val());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="referralCode" id="referralCode" type="hidden">

<select id="productsMusical" name="productsMusical">
  <option value="" selected="selected">--Please Select--</option>
  <option value="Guitars - Acoustic">Guitars - Acoustic</option>
  <option value="Guitars - Electric">Guitars - Electric</option>
  <option value="Guitars - Bass">Guitars - Bass</option>
  <option value="Keyboards - Acoustic Piano">Keyboards - Acoustic Piano</option>
  <option value="Keyboards - Digital Piano">Keyboards - Digital Piano</option>
  <option value="Keyboards - Synth">Keyboards - Synth</option>
  <option value="Drums - Acoustic">Drums - Acoustic</option>
  <option value="Drums - Electric">Drums - Electric</option>
  <option value="Drums - Band">Drums - Band</option>
  <option value="Microphones - Vocal">Microphones - Vocal</option>
  <option value="Microphones - Vocal Headset">Microphones - Vocal Headset</option>
  <option value="Microphones - Instrument">Microphones - Instrument</option>
</select>

【讨论】：