Convert three values of list dropdowns to a string variable-CodePudding

I have three drop-down lists, day, month and year.

First: I want to put a conditional code that if all three is selected, something is done.

Second: I want to store the values of all three in a string variable,

<select > // day
<option value="">days</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>

<select >// month
<option value="">Month</option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>

<select >// years
<option value="">years</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>

I want the inside of the variable to be stored as follows...

var string = "1 January 2017"

CodePudding user response：

I'm not sure how you would say when they are all three null, based on your code provided, but for the string part you can do.

var s = "";
$('.custom-select').change(function() {
  s = $('.custom-select').map(function() {
    return $(this).val();
  }).get().join(" ");
  console.log(s);
})

Demo

var s = "";
$('.custom-select').change(function() {
  s = $('.custom-select').map(function() {
    return $(this).val();
  }).get();
  var n = jQuery.inArray("", s) > -1;
  $('.button').toggle(!n)
  if (!n) {
    s = s.join(" ");
    console.log(s);
  }
}).first().trigger("change");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select >
  <option value="">days</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
</select>

<select >
  <option value="">month</option>
  <option value="January">January</option>
  <option value="February">February</option>
  <option value="March">March</option>
  <option value="April">April</option>
</select>

<select >
  <option value="">years</option>
  <option value="2014">2014</option>
  <option value="2015">2015</option>
  <option value="2016">2016</option>
  <option value="2017">2017</option>
</select>


<button >Show if selects have value.</button>