Question

我有3个选择框用于日，月和年，请参阅示例http://jsfiddle.net/arieanneke/sf73o0w5/

var birthday = "";
$('#birthday').change(function () {
var selectedDay = $(this).find(":selected").text();
alert(selectedDay);
birthday = selectedDay + "-";
$("#birthdaytext" ).text(birthday);
})

我希望在这个div中有一个包含所选日期的div，例如03-02-1970。

如何使这个jquery只有在所有3个选择框都没有默认值日，月和年并且选择框中的3个文本被设置为一个变量之后才能看到文本日期？< / p>

Answer 1

给出以下HTML：

<div id="birthdaytext" style="display: none;">
    <span></span>-
    <span></span>-
    <span></span>
</div>

使用以下jQuery：

jQuery(function($) {
    window.select = {}; // use global variable
    $('select').each(function() {
        $(this).on('change', function() {
            var $div = $('#birthdaytext')
            ,   name = $(this).attr('name')
            ,   value = $(this).val()
            ,   i = 0;

            if(name == 'birthday') {
                window.select[name] = value ? true : false;
                $div.find('span:eq(0)').text(value);
            } else if(name == 'birthmonth') {
                window.select[name] = value ? true : false;
                $div.find('span:eq(1)').text(value);
            } else if(name == 'birthyear') {
                window.select[name] = value ? true : false;
                $div.find('span:eq(2)').text(value);
            }

            for(name in window.select) // check if global variable is all true
                if(window.select[name] == true) ++i;

            if(i == 3) // if it is
                $div.show();
            else
                $div.hide();
        });
    });

});

Working JSFiddle

Answer 2

检查以下代码和DEMO。仅当使用单一更改事件选择所有三个选择框时，使用以下代码文本附加到div

HTML

  <select name="birthday" id="birthday" class="bday">
   <option value="" selected="selected">DAY</option>
   <option value="01">01</option>
   <option value="02">02</option>
   <option value="03">03</option>
  </select> 
 <select name="birthmonth" id="birthmonth" class="bday">
   <option value="" selected="selected">MONTH</option>
   <option value="01">01</option>
   <option value="02">02</option>
   <option value="03">03</option>
 </select> 
 <select name="birthyear" id="birthyear" class="bday">
  <option value="" selected="selected">YEAR</option>
  <option value="1970">1970</option>
  <option value="1971">1971</option>
  <option value="1972">1972</option>
 </select> 
  <br /><br />
  <span id="birthdaytext"></span>

JQUERY

   var birthday = birthmonth = birthyear = "";
   $(document).ready(function(){
     $('.bday').change(function () {

       if($(this).attr('id') == 'birthday'){
         birthday = $(this).val();
       }

       if($(this).attr('id') == 'birthmonth'){
         birthmonth = $(this).val();
       }

       if($(this).attr('id') == 'birthyear'){
         birthyear = $(this).val();
       }

       if(birthday!= "" && birthmonth!= '' && birthyear !== '' ){
        $('#birthdaytext').text(birthday+"-"+birthmonth+"-"+birthyear);
       }
    });
 })

Answer 3

您可能在寻找Demo Here

var birthday = "";
$('#birthday,#birthmonth,#birthyear').change(function () {
var selectedDay = $(this).find(":selected").text();
console.log(selectedDay);
if(this.id!="birthyear")
    birthday = selectedDay + "-";
else {
    birthday = selectedDay;
     $("#birthdaytext" ).show();
}
$("#birthdaytext" ).text($("#birthdaytext" ).text()+birthday);
});

Answer 4

尝试使用 .map() 和.join()从多个<select>获取值

var birthday;
var select = $('select');
select.change(function() {
  var count = 0;
  birthday = select.map(function() {
    $(':selected', this).val().length ? count++ : false;
    return $(':selected', this).val();
  }).get().join('-');
  if (count == 3) {
    $("#birthdaytext").text(birthday);
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="birthday" id="birthday">
  <option value="" selected="selected">DAY</option>
  <option value="01">01</option>
  <option value="02">02</option>
  <option value="03">03</option>
</select>
<select name="birthmonth" id="birthmonth">
  <option value="" selected="selected">MONTH</option>
  <option value="01">01</option>
  <option value="02">02</option>
  <option value="03">03</option>
</select>
<select name="birthyear" id="birthyear">
  <option value="" selected="selected">YEAR</option>
  <option value="1970">1970</option>
  <option value="1971">1971</option>
  <option value="1972">1972</option>
</select>
<br />
<br />
<span id="birthdaytext"></span>

<强> Fiddle

Answer 5

这是HTML

<select name="birthday" id="birthday">
    <option value="" selected="selected">DAY</option>
    <option value="01">01</option>
    <option value="02">02</option>
    <option value="03">03</option>
</select> 
<select name="birthmonth" id="birthmonth">
    <option value="" selected="selected">MONTH</option>
    <option value="01">01</option>
    <option value="02">02</option>
    <option value="03">03</option>
</select> 
<select name="birthyear" id="birthyear">
    <option value="" selected="selected">YEAR</option>
    <option value="1970">1970</option>
    <option value="1971">1971</option>
    <option value="1972">1972</option>
</select> 
<br /><br />
<span id="birthdaytext" style="display:none;"></span>

这是JS：

var birthday = "";
$('#birthday,#birthmonth,#birthyear').change(function () {
    var selectedDay = $(this).find(":selected").text();
    alert(selectedDay);
    if(this.id!="birthyear")
        birthday = selectedDay + "-";
    else {
        birthday = selectedDay;
         $("#birthdaytext" ).show();
    }
    $("#birthdaytext" ).text($("#birthdaytext" ).text()+birthday);
})

我认为这会有所帮助..

Answer 6

尝试，

var birthday = "";
var selectedDay = "";
var selectedMonth = "";
var selectedYear = "";
var complete=false;

$('#birthday').change(function () {
    selectedDay = $(this).find(":selected").text();
    if(complete==true) {
         birthday = selectedDay + "-" + selectedMonth + "-" + selectedYear;
         $("#birthdaytext").html(birthday);

     }


});

$('#birthmonth').change(function () {
    selectedMonth = $(this).find(":selected").text();
    if(complete==true) {
         birthday = selectedDay + "-" + selectedMonth + "-" + selectedYear;
         $("#birthdaytext").html(birthday);

     }
});

$('#birthyear').change(function () {
    var selectedYear = $(this).find(":selected").text();
    birthday = selectedDay + "-" + selectedMonth + "-" + selectedYear;
    $("#birthdaytext").html(birthday);
    complete=true;

});

如何从选择框中获取填充文本的div？

6 个答案: