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

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 个文本设置为一个变量后才可见？

Answer 1

检查下面的代码和DEMO .using 下面的代码文本仅在使用单个更改事件选择所有三个选择框时附加到潜水

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 2

给定以下 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 3

这是 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 4

你可能正在寻找这个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 5

尝试使用 .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 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;

});