从多个选择下拉列表中获取选择的选项值

Question

我正在尝试获取所有选定的选项值。它适用于Firefox，但不适用于Chrome或Safari。谁能告诉我我们可以如何以不同的方式进行操作，或者如何解决Chrome / Safari浏览器问题。

$(".export_option").click(function(e) {
  var payload = $('form').toJSON();
  console.log(payload);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <select name="assetType" id="assetType" class="selectclass">
    <option selected disabled>Asset Type (General)</option>
    <option class="export_option" value="Internal Only - Win">Internal Only - Win</option>
    <option class="export_option" value="Internal Only - Use Case">Internal Only - Use Case</option>
    <option class="export_option" value="Peer-to-Peer, Sales Reference Only">Peer-to-Peer/Sales Reference Only</option>
    <option class="export_option" value="Public - Customer Press Release">Public - Customer Press Release</option>
    <option class="export_option" value="Public - Success Story">Public - Success Story</option>
  </select><br>

  <select name="prodService" id="prodService" class="selectclass">
    <option selected disabled>Product/Service</option>
    <option class="export_option" value="NetBackup">NetBackup</option>
    <option class="export_option" value="NetBackup Appliances">NetBackup Appliances</option>
    <option class="export_option" value="360 Data Management">360 Data Management</option>
    <option class="export_option" value="Access">Access</option>
    <option class="export_option" value="Access Appliances">Access Appliances</option>
    <option class="export_option" value="Application HA">Application HA</option>
    <option class="export_option" value="Backup Exec">Backup Exec</option>
    <option class="export_option" value="Cloud Catalyst">Cloud Catalyst</option>
    <option class="export_option" value="CloudPoint">CloudPoint</option>
    <option class="export_option" value="Data Insight">Data Insight</option>
    <option class="export_option" value="eDiscovery">eDiscovery</option>
    <option class="export_option" value="Enterprise Vault">Enterprise Vault</option>
    <option class="export_option" value="Enterprise Vault.cloud">Enterprise Vault.cloud</option>
    <option class="export_option" value="Flex Appliance">Flex Appliance</option>
    <option class="export_option" value="Information Map">Information Map</option>
    <option class="export_option" value="InfoScale">InfoScale</option>
    <option class="export_option" value="Resiliency Platform (VRP)">Resiliency Platform (VRP)</option>
    <option class="export_option" value="Velocity">Velocity</option>
    <option class="export_option" value="Business Critical Services">Business Critical Services</option>
    <option class="export_option" value="Consulting Services">Consulting Services</option>
    <option class="export_option" value="Education Services">Education Services</option>
    <option class="export_option" value="Managed Services">Managed Services</option>
  </select>

  <br>

  <select name="industry" id="industry" class="selectclass">
    <option selected disabled>Industry</option>
    <option class="export_option" value="Academic (College & University)">Academic: College/University</option>
    <option class="export_option" value="Academic (K-12)">Academic: K-12</option>
    <option class="export_option" value="Accountants">Accountants</option>
    <option class="export_option" value="Aerospace">Aerospace</option>
    <option class="export_option" value="Automotive">Automotive</option>
    <option class="export_option" value="Banking & Finance">Banking & Finance</option>
    <option class="export_option" value="Chemical Industry">Chemical Industry</option>
    <option class="export_option" value="Communication & Media">Communication & Media</option>
    <option class="export_option" value="Construction">Construction</option>
    <option class="export_option" value="Consulting">Consulting</option>
    <option class="export_option" value="Consumer Elec/Hardware">Consumer Elec/Hardware</option>
    <option class="export_option" value="Consumer Goods">Consumer Goods</option>
    <option class="export_option" value="Energy/Utilities">Energy/Utilities</option>
    <option class="export_option" value="Entertainment/Gaming">Entertainment/Gaming</option>
    <option class="export_option" value="Food, Drink & Tobacco">Food, Drink & Tobacco</option>
    <option class="export_option" value="Government Crime/Justice/Law">Government Crime/Justice/Law</option>
    <option class="export_option" value="Government Defense">Government Defense</option>
    <option class="export_option" value="Government Federal/Central">Government Federal/Central</option>
    <option class="export_option" value="Government Health/Social">Government Health/Social</option>
    <option class="export_option" value="Government Public">Government Public</option>
    <option class="export_option" value="Government State/Local">Government State/Local</option>
    <option class="export_option" value="Healthcare">Healthcare</option>
    <option class="export_option" value="Hotel Leisure">Hotel Leisure</option>
    <option class="export_option" value="Information Technology">Information Technology</option>
    <option class="export_option" value="Insurance">Insurance</option>
    <option class="export_option" value="ISP/ASP/xSP">ISP/ASP/xSP</option>
    <option class="export_option" value="Legal Services">Legal Services</option>
    <option class="export_option" value="Logistics">Logistics</option>
    <option class="export_option" value="Manufacturing">Manufacturing</option>
    <option class="export_option" value="Mining & Exploration">Mining & Exploration</option>
    <option class="export_option" value="Non Profit /Charity">Non Profit /Charity</option>
    <option class="export_option" value="Pharmaceuticals">Pharmaceuticals</option>
    <option class="export_option" value="Real Estate">Real Estate</option>
    <option class="export_option" value="Retail">Retail</option>
    <option class="export_option" value="Software/Online Services">Software/Online Services</option>
    <option class="export_option" value="Telecommunications">Telecommunications</option>
    <option class="export_option" value="Travel/Hospitality">Travel/Hospitality</option>
  </select>

  <br>

  <select name="geo" id="geo" class="selectclass">
    <option selected disabled>GEO - Region</option>
    <option class="export_option" value="AMS-Public Sector"> AMS-Public Sector </option>
    <option class="export_option" value="AMS-West"> AMS-West </option>
    <option class="export_option" value="AMS - East"> AMS-East </option>
    <option class="export_option" value="AMS-LAMC"> AMS-LAMC </option>
    <option class="export_option" value="AMS-Mid-Market Commercial (Inside sales)"> AMS-Mid-Market Commercial (Inside sales) </option>
    <option class="export_option" value="AMS-Global & Startegic Accounts"> AMS-Global & Startegic Accounts </option>
    <option class="export_option" value="EMEA-North"> EMEA-North </option>
    <option class="export_option" value="EMEA-Central"> EMEA-Central </option>
    <option class="export_option" value="EMEA-South"> EMEA-South </option>
    <option class="export_option" value="EMEA-Emerging"> EMEA-Emerging </option>
    <option class="export_option" value="APJ-Asia South (ASR)"> APJ-Asia South (ASR) </option>
    <option class="export_option" value="APJ-Greater China (GCR)"> APJ-Greater China (GCR) </option>
    <option class="export_option" value="APJ-India (INR)"> APJ-India (INR) </option>
    <option class="export_option" value="APJ-Japan (JPR)"> APJ-Japan (JPR) </option>
    <option class="export_option" value="APJ-Kora (KOR)"> APJ-Kora (KOR) </option>
    <option class="export_option" value="APJ-Pacific (PAR)"> APJ-Pacific (PAR) </option>
  </select>

  <br>

  <select name="competitor" id="competitor" class="selectclass">
    <option selected disabled>Competitor</option>
    <option class="export_option" value="Cohesity">Cohesity</option>
    <option class="export_option" value="Commvault">Commvault</option>
    <option class="export_option" value="Dell EMC">Dell/EMC</option>
    <option class="export_option" value="HPE">HPE</option>
    <option class="export_option" value="IBM">IBM</option>
    <option class="export_option" value="Microsoft">Microsoft</option>
    <option class="export_option" value="Rubrik">Rubrik</option>
    <option class="export_option" value="Veeam">Veeam</option>
    <option class="export_option" value="Zerto">Zerto</option>
    <option class="export_option" value="Other">Other</option>
  </select>

  <br>

  <select name="usecase" id="usecase" class="selectclass">
    <option selected disabled>Use Case</option>
    <option class="export_option" value="Cloud Service Provider">Cloud Service Provider</option>
    <option class="export_option" value="Multi-Cloud Data Management">Multi-Cloud Data Management</option>
    <option class="export_option" value="Backup & Recovery">Backup & Recovery</option>
    <option class="export_option" value="Business Continuity">Business Continuity</option>
    <option class="export_option" value="Software Defined Storage">Software Defined Storage</option>
    <option class="export_option" value="Information Governance">Information Governance</option>
  </select>
</form>

Answer 1

您可以轻松地在表单元素上循环以填充地图。如果表单包含多选下拉列表，则jQuery.fn.val函数将负责获取所有值。注意：我对最后一个下拉列表进行了多选。

// Simple form elements to JSON function.
function formToJSON(form) {
  return [].reduce.call(form.elements, (result, el) => {
    return Object.assign(result, { [el.name]: $(el).val() });
  }, {});
}

// jQuery plugin wrapper.
(function($) {
  $.fn.formToJSON = function() {
    return formToJSON(this[0]);
  };
})(jQuery);

$('form').change('.export_option', function(e) {
  let payload = $('form').formToJSON();
  console.log(payload);
});

.as-console-wrapper { bottom: 0; max-height: 25% !important; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<form>
  <select name="assetType" id="assetType" class="selectclass">
    <option selected disabled>Asset Type (General)</option>
    <option class="export_option" value="Internal Only - Win">Internal Only - Win</option>
    <option class="export_option" value="Internal Only - Use Case">Internal Only - Use Case</option>
    <option class="export_option" value="Peer-to-Peer, Sales Reference Only">Peer-to-Peer/Sales Reference Only</option>
    <option class="export_option" value="Public - Customer Press Release">Public - Customer Press Release</option>
    <option class="export_option" value="Public - Success Story">Public - Success Story</option>
  </select><br>

  <select name="prodService" id="prodService" class="selectclass">
    <option selected disabled>Product/Service</option>
    <option class="export_option" value="NetBackup">NetBackup</option>
    <option class="export_option" value="NetBackup Appliances">NetBackup Appliances</option>
    <option class="export_option" value="360 Data Management">360 Data Management</option>
    <option class="export_option" value="Access">Access</option>
    <option class="export_option" value="Access Appliances">Access Appliances</option>
    <option class="export_option" value="Application HA">Application HA</option>
    <option class="export_option" value="Backup Exec">Backup Exec</option>
    <option class="export_option" value="Cloud Catalyst">Cloud Catalyst</option>
    <option class="export_option" value="CloudPoint">CloudPoint</option>
    <option class="export_option" value="Data Insight">Data Insight</option>
    <option class="export_option" value="eDiscovery">eDiscovery</option>
    <option class="export_option" value="Enterprise Vault">Enterprise Vault</option>
    <option class="export_option" value="Enterprise Vault.cloud">Enterprise Vault.cloud</option>
    <option class="export_option" value="Flex Appliance">Flex Appliance</option>
    <option class="export_option" value="Information Map">Information Map</option>
    <option class="export_option" value="InfoScale">InfoScale</option>
    <option class="export_option" value="Resiliency Platform (VRP)">Resiliency Platform (VRP)</option>
    <option class="export_option" value="Velocity">Velocity</option>
    <option class="export_option" value="Business Critical Services">Business Critical Services</option>
    <option class="export_option" value="Consulting Services">Consulting Services</option>
    <option class="export_option" value="Education Services">Education Services</option>
    <option class="export_option" value="Managed Services">Managed Services</option>
  </select>

  <br>

  <select name="industry" id="industry" class="selectclass">
    <option selected disabled>Industry</option>
    <option class="export_option" value="Academic (College & University)">Academic: College/University</option>
    <option class="export_option" value="Academic (K-12)">Academic: K-12</option>
    <option class="export_option" value="Accountants">Accountants</option>
    <option class="export_option" value="Aerospace">Aerospace</option>
    <option class="export_option" value="Automotive">Automotive</option>
    <option class="export_option" value="Banking & Finance">Banking & Finance</option>
    <option class="export_option" value="Chemical Industry">Chemical Industry</option>
    <option class="export_option" value="Communication & Media">Communication & Media</option>
    <option class="export_option" value="Construction">Construction</option>
    <option class="export_option" value="Consulting">Consulting</option>
    <option class="export_option" value="Consumer Elec/Hardware">Consumer Elec/Hardware</option>
    <option class="export_option" value="Consumer Goods">Consumer Goods</option>
    <option class="export_option" value="Energy/Utilities">Energy/Utilities</option>
    <option class="export_option" value="Entertainment/Gaming">Entertainment/Gaming</option>
    <option class="export_option" value="Food, Drink & Tobacco">Food, Drink & Tobacco</option>
    <option class="export_option" value="Government Crime/Justice/Law">Government Crime/Justice/Law</option>
    <option class="export_option" value="Government Defense">Government Defense</option>
    <option class="export_option" value="Government Federal/Central">Government Federal/Central</option>
    <option class="export_option" value="Government Health/Social">Government Health/Social</option>
    <option class="export_option" value="Government Public">Government Public</option>
    <option class="export_option" value="Government State/Local">Government State/Local</option>
    <option class="export_option" value="Healthcare">Healthcare</option>
    <option class="export_option" value="Hotel Leisure">Hotel Leisure</option>
    <option class="export_option" value="Information Technology">Information Technology</option>
    <option class="export_option" value="Insurance">Insurance</option>
    <option class="export_option" value="ISP/ASP/xSP">ISP/ASP/xSP</option>
    <option class="export_option" value="Legal Services">Legal Services</option>
    <option class="export_option" value="Logistics">Logistics</option>
    <option class="export_option" value="Manufacturing">Manufacturing</option>
    <option class="export_option" value="Mining & Exploration">Mining & Exploration</option>
    <option class="export_option" value="Non Profit /Charity">Non Profit /Charity</option>
    <option class="export_option" value="Pharmaceuticals">Pharmaceuticals</option>
    <option class="export_option" value="Real Estate">Real Estate</option>
    <option class="export_option" value="Retail">Retail</option>
    <option class="export_option" value="Software/Online Services">Software/Online Services</option>
    <option class="export_option" value="Telecommunications">Telecommunications</option>
    <option class="export_option" value="Travel/Hospitality">Travel/Hospitality</option>
  </select>

  <br>

  <select name="geo" id="geo" class="selectclass">
    <option selected disabled>GEO - Region</option>
    <option class="export_option" value="AMS-Public Sector"> AMS-Public Sector </option>
    <option class="export_option" value="AMS-West"> AMS-West </option>
    <option class="export_option" value="AMS - East"> AMS-East </option>
    <option class="export_option" value="AMS-LAMC"> AMS-LAMC </option>
    <option class="export_option" value="AMS-Mid-Market Commercial (Inside sales)"> AMS-Mid-Market Commercial (Inside sales) </option>
    <option class="export_option" value="AMS-Global & Startegic Accounts"> AMS-Global & Startegic Accounts </option>
    <option class="export_option" value="EMEA-North"> EMEA-North </option>
    <option class="export_option" value="EMEA-Central"> EMEA-Central </option>
    <option class="export_option" value="EMEA-South"> EMEA-South </option>
    <option class="export_option" value="EMEA-Emerging"> EMEA-Emerging </option>
    <option class="export_option" value="APJ-Asia South (ASR)"> APJ-Asia South (ASR) </option>
    <option class="export_option" value="APJ-Greater China (GCR)"> APJ-Greater China (GCR) </option>
    <option class="export_option" value="APJ-India (INR)"> APJ-India (INR) </option>
    <option class="export_option" value="APJ-Japan (JPR)"> APJ-Japan (JPR) </option>
    <option class="export_option" value="APJ-Kora (KOR)"> APJ-Kora (KOR) </option>
    <option class="export_option" value="APJ-Pacific (PAR)"> APJ-Pacific (PAR) </option>
  </select>

  <br>

  <select name="competitor" id="competitor" class="selectclass">
    <option selected disabled>Competitor</option>
    <option class="export_option" value="Cohesity">Cohesity</option>
    <option class="export_option" value="Commvault">Commvault</option>
    <option class="export_option" value="Dell EMC">Dell/EMC</option>
    <option class="export_option" value="HPE">HPE</option>
    <option class="export_option" value="IBM">IBM</option>
    <option class="export_option" value="Microsoft">Microsoft</option>
    <option class="export_option" value="Rubrik">Rubrik</option>
    <option class="export_option" value="Veeam">Veeam</option>
    <option class="export_option" value="Zerto">Zerto</option>
    <option class="export_option" value="Other">Other</option>
  </select>

  <br>

  <select name="usecase" id="usecase" class="selectclass" multiple>
    <option selected disabled>Use Case</option>
    <option class="export_option" value="Cloud Service Provider">Cloud Service Provider</option>
    <option class="export_option" value="Multi-Cloud Data Management">Multi-Cloud Data Management</option>
    <option class="export_option" value="Backup & Recovery">Backup & Recovery</option>
    <option class="export_option" value="Business Continuity">Business Continuity</option>
    <option class="export_option" value="Software Defined Storage">Software Defined Storage</option>
    <option class="export_option" value="Information Governance">Information Governance</option>
  </select>
</form>

Answer 2

以下示例将.on()事件change委托给form，然后在.each() select上将.val()保存在变量中。 / p>

演示

$("form").on('change', function(e) {
  console.clear();
  $('select').each(function() {
    var payload = $(this).val();
    console.log(payload);
  });
});

.as-console-wrapper {
  width: 45%;
  margin-left:55%;
}
.as-console-row.as-console-row::after {
  content:'';
  padding:0;
  margin:0;
  border:0;
  width:0;
}

<form>
  <select name="assetType" id="assetType" class="selectclass">
    <option selected disabled>Asset Type (General)</option>
    <option class="export_option" value="Internal Only - Win">Internal Only - Win</option>
    <option class="export_option" value="Internal Only - Use Case">Internal Only - Use Case</option>
    <option class="export_option" value="Peer-to-Peer, Sales Reference Only">Peer-to-Peer/Sales Reference Only</option>
    <option class="export_option" value="Public - Customer Press Release">Public - Customer Press Release</option>
    <option class="export_option" value="Public - Success Story">Public - Success Story</option>
  </select><br>

  <select name="prodService" id="prodService" class="selectclass">
    <option selected disabled>Product/Service</option>
    <option class="export_option" value="NetBackup">NetBackup</option>
    <option class="export_option" value="NetBackup Appliances">NetBackup Appliances</option>
    <option class="export_option" value="360 Data Management">360 Data Management</option>
    <option class="export_option" value="Access">Access</option>
    <option class="export_option" value="Access Appliances">Access Appliances</option>
    <option class="export_option" value="Application HA">Application HA</option>
    <option class="export_option" value="Backup Exec">Backup Exec</option>
    <option class="export_option" value="Cloud Catalyst">Cloud Catalyst</option>
    <option class="export_option" value="CloudPoint">CloudPoint</option>
    <option class="export_option" value="Data Insight">Data Insight</option>
    <option class="export_option" value="eDiscovery">eDiscovery</option>
    <option class="export_option" value="Enterprise Vault">Enterprise Vault</option>
    <option class="export_option" value="Enterprise Vault.cloud">Enterprise Vault.cloud</option>
    <option class="export_option" value="Flex Appliance">Flex Appliance</option>
    <option class="export_option" value="Information Map">Information Map</option>
    <option class="export_option" value="InfoScale">InfoScale</option>
    <option class="export_option" value="Resiliency Platform (VRP)">Resiliency Platform (VRP)</option>
    <option class="export_option" value="Velocity">Velocity</option>
    <option class="export_option" value="Business Critical Services">Business Critical Services</option>
    <option class="export_option" value="Consulting Services">Consulting Services</option>
    <option class="export_option" value="Education Services">Education Services</option>
    <option class="export_option" value="Managed Services">Managed Services</option>
  </select>

  <br>

  <select name="industry" id="industry" class="selectclass">
    <option selected disabled>Industry</option>
    <option class="export_option" value="Academic (College & University)">Academic: College/University</option>
    <option class="export_option" value="Academic (K-12)">Academic: K-12</option>
    <option class="export_option" value="Accountants">Accountants</option>
    <option class="export_option" value="Aerospace">Aerospace</option>
    <option class="export_option" value="Automotive">Automotive</option>
    <option class="export_option" value="Banking & Finance">Banking & Finance</option>
    <option class="export_option" value="Chemical Industry">Chemical Industry</option>
    <option class="export_option" value="Communication & Media">Communication & Media</option>
    <option class="export_option" value="Construction">Construction</option>
    <option class="export_option" value="Consulting">Consulting</option>
    <option class="export_option" value="Consumer Elec/Hardware">Consumer Elec/Hardware</option>
    <option class="export_option" value="Consumer Goods">Consumer Goods</option>
    <option class="export_option" value="Energy/Utilities">Energy/Utilities</option>
    <option class="export_option" value="Entertainment/Gaming">Entertainment/Gaming</option>
    <option class="export_option" value="Food, Drink & Tobacco">Food, Drink & Tobacco</option>
    <option class="export_option" value="Government Crime/Justice/Law">Government Crime/Justice/Law</option>
    <option class="export_option" value="Government Defense">Government Defense</option>
    <option class="export_option" value="Government Federal/Central">Government Federal/Central</option>
    <option class="export_option" value="Government Health/Social">Government Health/Social</option>
    <option class="export_option" value="Government Public">Government Public</option>
    <option class="export_option" value="Government State/Local">Government State/Local</option>
    <option class="export_option" value="Healthcare">Healthcare</option>
    <option class="export_option" value="Hotel Leisure">Hotel Leisure</option>
    <option class="export_option" value="Information Technology">Information Technology</option>
    <option class="export_option" value="Insurance">Insurance</option>
    <option class="export_option" value="ISP/ASP/xSP">ISP/ASP/xSP</option>
    <option class="export_option" value="Legal Services">Legal Services</option>
    <option class="export_option" value="Logistics">Logistics</option>
    <option class="export_option" value="Manufacturing">Manufacturing</option>
    <option class="export_option" value="Mining & Exploration">Mining & Exploration</option>
    <option class="export_option" value="Non Profit /Charity">Non Profit /Charity</option>
    <option class="export_option" value="Pharmaceuticals">Pharmaceuticals</option>
    <option class="export_option" value="Real Estate">Real Estate</option>
    <option class="export_option" value="Retail">Retail</option>
    <option class="export_option" value="Software/Online Services">Software/Online Services</option>
    <option class="export_option" value="Telecommunications">Telecommunications</option>
    <option class="export_option" value="Travel/Hospitality">Travel/Hospitality</option>
  </select>

  <br>

  <select name="geo" id="geo" class="selectclass">
    <option selected disabled>GEO - Region</option>
    <option class="export_option" value="AMS-Public Sector"> AMS-Public Sector </option>
    <option class="export_option" value="AMS-West"> AMS-West </option>
    <option class="export_option" value="AMS - East"> AMS-East </option>
    <option class="export_option" value="AMS-LAMC"> AMS-LAMC </option>
    <option class="export_option" value="AMS-Mid-Market Commercial (Inside sales)"> AMS-Mid-Market Commercial (Inside sales) </option>
    <option class="export_option" value="AMS-Global & Startegic Accounts"> AMS-Global & Startegic Accounts </option>
    <option class="export_option" value="EMEA-North"> EMEA-North </option>
    <option class="export_option" value="EMEA-Central"> EMEA-Central </option>
    <option class="export_option" value="EMEA-South"> EMEA-South </option>
    <option class="export_option" value="EMEA-Emerging"> EMEA-Emerging </option>
    <option class="export_option" value="APJ-Asia South (ASR)"> APJ-Asia South (ASR) </option>
    <option class="export_option" value="APJ-Greater China (GCR)"> APJ-Greater China (GCR) </option>
    <option class="export_option" value="APJ-India (INR)"> APJ-India (INR) </option>
    <option class="export_option" value="APJ-Japan (JPR)"> APJ-Japan (JPR) </option>
    <option class="export_option" value="APJ-Kora (KOR)"> APJ-Kora (KOR) </option>
    <option class="export_option" value="APJ-Pacific (PAR)"> APJ-Pacific (PAR) </option>
  </select>

  <br>

  <select name="competitor" id="competitor" class="selectclass">
    <option selected disabled>Competitor</option>
    <option class="export_option" value="Cohesity">Cohesity</option>
    <option class="export_option" value="Commvault">Commvault</option>
    <option class="export_option" value="Dell EMC">Dell/EMC</option>
    <option class="export_option" value="HPE">HPE</option>
    <option class="export_option" value="IBM">IBM</option>
    <option class="export_option" value="Microsoft">Microsoft</option>
    <option class="export_option" value="Rubrik">Rubrik</option>
    <option class="export_option" value="Veeam">Veeam</option>
    <option class="export_option" value="Zerto">Zerto</option>
    <option class="export_option" value="Other">Other</option>
  </select>

  <br>

  <select name="usecase" id="usecase" class="selectclass">
    <option selected disabled>Use Case</option>
    <option class="export_option" value="Cloud Service Provider">Cloud Service Provider</option>
    <option class="export_option" value="Multi-Cloud Data Management">Multi-Cloud Data Management</option>
    <option class="export_option" value="Backup & Recovery">Backup & Recovery</option>
    <option class="export_option" value="Business Continuity">Business Continuity</option>
    <option class="export_option" value="Software Defined Storage">Software Defined Storage</option>
    <option class="export_option" value="Information Governance">Information Governance</option>
  </select>
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>