Question

我有关于Jquery的问题

    <select id="thechoices">
<option value="0">Select Box</option>
<option value="box1">Box 1</option>
<option value="box2">Box 2</option>
<option value="box3">Box 3</option>
</select>

<!-- the DIV -->
<div id="value"> disabled till you make a choice</div>

当选择菜单有选择框时，我需要将div显示为带有禁用信息的小黑屏一旦用户更改选择菜单并选择另一个选项，值div将显示所选选项，例如Box 1或Box 2

Answer 1

$(document).ready(function() {
    // event triggered when options changed
    $('#thechoices').change(function() {
        // check if first option or other is selected
        if ($(this).val() == 0) {
            $('#value').addClass('disabled');
            $('#value').html($('#value').data('default'));
        } else {
            $('#value').removeClass('disabled');
            $('#value').html($(this).val());
        }
    });
});

查看小提琴：http://jsfiddle.net/gwKfP/1/

Answer 2

这是一个快速解决方案，只需添加以下代码：

CSS：

<style>
  .disabled{
    background-color: gray;
  }
</style>

的JavaScript

function onSelectedOption(){
   var selectedText = $("#thechoices option:selected").text();
   if($("#thechoices").val() == "0")
     $('#value').addClass("disabled").text(selectedText );
   else
     $('#value').removeClass("disabled").text("");
}

$(document).ready(function(){
  onSelectedOption(); //With this we 'disable' when page loads
  $('#thechoices').change(onSelectedOption);
});

希望这有帮助

Answer 3

以下是一个有效的示例：http://jsfiddle.net/sHqFX/

<select id="thechoices">
<option value="0">Select Box</option>
<option value="box1">Box 1</option>
<option value="box2">Box 2</option>
<option value="box3">Box 3</option>
</select>

<!-- the DIV -->
<div id="value"></div>

将它放在头标记之间

<script type="text/javascript">
$(document).ready(function(){
    $("#thechoices").change(function(){

       if($(this).val() == 0)
       {
           $("#value").html("disabled till you make a choice");
            $("#value").css("background-color","black");
                 $("#value").css("color","white");
       }
        else{
            $("#value").html($("#thechoices option:selected").text());
            $("#value").css("background-color","white");
            $("#value").css("color","black");
        }
    });
});
</script>

Answer 4

使用jQuery'change'事件。 http://api.jquery.com/change/

$('#thechoices').change(function(){
    $('#value').css('display','block');
});

Answer 5

$('#thechoices').change(
  function() {
    $('#value').text(
      $('#thechoices :selected').text()
    )
  }
);

div用jquery显示选择菜单值

5 个答案: