如何从 select 框中获取充满文本的 div？

Question

我有 3 个 select 框用于表示日、月和年，请参见示例 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 和 selected 日期，例如 03-02-1970。

如何使 jquery 只有在所有 3 个 select 框都没有默认值日、月和年之后文本日期才可见，并且来自的 3 个文本select 个框设置为一个变量？

Answer 1

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

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

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

试试，

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;

});

Answer 6

检查下面的代码和 DEMO。仅当所有三个 select 框都使用单个更改事件 selected 时，使用下面的代码文本附加到潜水

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);
       }
    });
 })

如何从 select 框中获取充满文本的 div？

How to get a div filled with text from a select box?

jquery

onchange

drop-down-menu