Question

我想在我的页面上显示文本，基于一个文本输入和四个选择输入。在用户选择任何输入后立即动态显示它的正确代码是什么？如果我写第一个输入：“面包”和带有选项“洋葱”的选择标签，输出应该是：面包洋葱。如果我选择另一个选择选项，它应该自动刷新它：面包番茄。

<input type="text" id="text1">

<select id="cat1">
    <option>Onion</option>
    <option>Tomato</option>
</select>

<p class="show"></p>

<script>
    $(document).ready(function () {
        $("#text1").keyup(function () {
            var val = $(this).val();
            var cat1 = $("#cat1").val();
            $(".show").html(val + " " + cat1);
        });
    });
</script>

Answer 1

使用change事件代替keyup来实现此目的并检查输入值是否为空，请查看以下示例：

＆＃13;

$(document).ready(function(){
     $("#cat1").change(function() {
         var val = $("#text1").val();
         if (val==""){
            $(".show").html("Write something before in the input");
         }
         else{
            var cat1 = $(this).val();           
            $(".show").html(val + " " + cat1);
         }
     });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="text1">

<select id="cat1">
  <option selected disabled> -- Select Option  --</option>
  <option>Onion</option>
  <option>Tomato</option>
</select>

<p class="show"></p>

＆＃13;

Answer 2

创建一个单独的函数来连接它们并在两种情况下调用它们：

开keyup。
选择change。

请参阅以下代码段

＆＃13;

$(document).ready(function() {
  var chng = function() {
    var text = $("#text1").val();
    var cat = $("#cat1").val();
    $(".show").html(text + " " + cat);
  };
  $("#text1").keyup(chng);
  $("#cat1").change(chng);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="text1" />

<select id="cat1">
  <option>Onion</option>
  <option>Tomato</option>
</select>

<p class="show"></p>

＆＃13;

如果您希望在之后显示文字，请使用blur事件：

＆＃13;
＆＃13;
$(document).ready(function() { var chng = function() { var text = $("#text1").val(); var cat = $("#cat1").val(); $(".show").html(text + " " + cat); }; $("#text1").blur(chng); $("#cat1").change(chng); });
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="text1" /> <select id="cat1"> <option>Onion</option> <option>Tomato</option> </select> <p class="show"></p>
＆＃13;
＆＃13;
＆＃13;

如何使用jquery从各种输入动态显示文本？

2 个答案: