Question

我正在尝试从从mysql填充的选项中检索的文本中搜索特定的子字符串，如何返回所选选项的文本值，以便我可以搜索我的子字符串。

＆＃13;

$(document).ready(function() {
  $("borrowitem").change(function() {
    $("#borrowitem option:selected").text();
    var optionValue = $(this).text;
    if (optionValue == "non-consumable") {
      $("#showtime").hide();
    } else {
      $("#showtime").hide();
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control input-lg borrowitem" name="borrowitem[]" required="required" id="borrowitem"><option></option></select>

＆＃13;

Answer 1

在更改事件中查找选定的值$(this).val() === 'non-consumable'。例如

$('#borrowitem').change(function () {
  console.log($(this).val() === 'non-consumable');
});

<select id="borrowitem">
  <option>non-consumable</option>
  <option>consumable</option>
</select>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

如果是多重选择，请将条件更改为

$(this).val().indexOf('non-consumable') !== -1

Answer 2

为什么有两个$（“＃showtime”）。hide（）; ＆安培;在if else中不是show（）..

无论如何，这里是您错过ID选择器＃

的代码

 <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#borrowitem").change(function(){
       var optionValue=  $( "#borrowitem option:selected" ).val();		 
           console.log(optionValue);
            if(optionValue == "non-consumable") {
                    $("#showtime").hide();
                }
				else{
                    $("#showtime").show();
                }
        });
});

</script>
</head>

<body>


<select class="form-control input-lg borrowitem" name="borrowitem[]" required="required" id="borrowitem">
  <option value="non-consumable">carrot</option>
  <option value="non-consumable">potato</option>
  <option value="opel">Opel</option>
  <option value="non-consumable">apple</option>
</select>
  
  <br/><hr/><br/>
  
  <div id="showtime">SHow TIME</div>
  
</body>
</html>

Answer 3

试试这个示例代码

您通过id with # in onchange event并撰写onchange as .on("change",function())并使用$("#borrowitem option:selected").text()进行选择，以便它可以正常工作

$(document).ready(function() {
  $("#borrowitem").on("change", function() {
    // alert($("#borrowitem option:selected").text());
    var optionValue = $("#borrowitem option:selected").text();
    //alert(optionValue);
    if (optionValue == "non-consumable") {
      $("#showtime").hide();
    } else {
      $("#showtime").show();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control input-lg borrowitem" name="borrowitem[]" required="required" id="borrowitem"><option>test</option>
<option>non-consumable</option></select>

<span id="showtime">hello</span>

Answer 4

你走了。

其他人错过的是你必须检查页面何时加载初始showtime元素的状态。例如：我们可以使用non-consumable作为选定选项加载预隐藏，或者我们可以使用所选选项consumable加载它。

我们可能需要做的一个重要原因是“粘性”形式。这是一种在提交尝试后保留其价值的表单。

要做到这一点，我们需要做的就是“功能化”我们想要采取的行动。基本上只需创建一个函数来执行它，然后在页面准备好时从事件处理程序和onReady事件中调用它。而不是直接将它放在事件处理程序中。

所以Orange是consumable，然后绿色是non-consumable。我希望看到一些内容，因此我为orange添加了showtime框。然后我将它包裹在一个绿色的盒子里，以便在隐藏的地方打开它。主要是为了防止选择元素在隐藏框时跳转，但我也喜欢对比。

他们中大部分（全部）错过的另一件事是：

这样我就可以搜索我的子串

见下面的解释

   (function($){
  $(document).ready(function(){

     /* set state of showtime */
     function setShowtimeState ()
     {
         var text = $('#borrowitem').find('option:selected').text();
         var Regx = new RegExp(/\bnon\-consumable\b/, 'i'); //case insensitive

         if( Regx.test(text) )
             $('#showtime').hide();
         else
             $('#showtime').show();
      }

       //call on change of the select element
      $('#borrowitem').change(setShowtimeState );

      //call on ready to set the initial state
      setShowtimeState ();
  });
   })(jQuery);

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

 <div id="showtime-wrapper" style="margin-bottom: 5px;width:50px;height:50px;background:green; border: 1px solid black;">
     <div id="showtime" style="width:100%;height:100%;background:orange;">&nbsp;</div>
</div>

<select class="form-control input-lg borrowitem" name="borrowitem[]" required="required" id="borrowitem">
     <option>- pick an option - </option>
     <option>non-consumable</option>
     <option>consumable</option>
     <option>this is non-consumable</option>
     <option>this is consumable</option>
     <option>Case Insensitive NON-Consumable</option>
</select>

<强>至REGx

我使用正则表达式来匹配子字符串。如果你从不搞砸它们，这有点复杂，但这是最好的匹配方式。我将引导您完成我使用过的模式：

/\bnon\-consumable\b/

所以要为你打破这个

/被称为分隔符，用于标记regx的开头|
\b匹配单词边界。例如，如果我们使用|标记此字符串|foobar| |is| |a| |word|的单词边界。这样做的目的是，如果我们查找子字符串foo，我们可以匹配foobar中的字符串，但如果我们查找\bfoo\b它将不匹配，因为它们之间没有字边界foo和bar。这有助于防止子字符串上的错误匹配。
“字母”只是字母和字母串字母
然后我们有结束Regx的结束分隔符/

new RegExp的第二个参数是标志，我使用i标志进行不区分大小写的匹配，您可以省略区分大小写的匹配。

了解更多信息https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp

我觉得有必要提一件事是你有一个带数组括号的select borrowitem[]的名字。通常这是出于以下两个原因之一：

将此名称的多个元素传递给服务器
设置选择框的多重标记，并使其多选

这两个都需要一些代码更改。但是有第三种选择，你刚刚做到了，因为。

在没有值

4 个答案: