値なしの選択肢の中で部分文字列を検索する

mysqlから取り込まれたオプションから取り出されたテキスト中の特定の部分文字列を検索しようとしています。。値なしの選択肢の中で部分文字列を検索する

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

<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>

出典

2017-11-01 Daphne Lupiya

これで、選択したテキストが欲しいですか？ –

あなたはセレクタが間違っています '$（" borrowitem "）'と '$（" #borrowitem option：selected "）' – ArtisticPhoenix

に条件を変更します。 &ないショー（）であれば、他に...とにかくここ

はあなたが合格、このサンプルコード

を試し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(); \t \t 
 
      console.log(optionValue); 
 
      if(optionValue == "non-consumable") { 
 
        $("#showtime").hide(); 
 
       } 
 
\t \t \t \t 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>

出典

2017-11-01 07:14:10

私はArtisticphoenixのコードを使用しました。行う。 –

変更イベントの内部$(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>

については、）なぜ2つの2 $（ "＃ショータイム"）がある（非表示

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

出典

2017-11-01 07:13:46 Shreevardhan

を逃していたコードですid with # in onchange eventと書いてを入力し、$("#borrowitem option:selected").text()を使用して選択してください。

01ここに行く

$(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>

出典

2017-11-01 07:21:09 Bhargav

。

何か他の人が見逃したことは、最初のshowtime要素の状態をページに読み込むタイミングを確認する必要があることです。たとえば、選択したオプションとしてnon-consumableをあらかじめ隠しておくこともできますし、選択したオプションconsumableで表示することもできます。

これを行う必要がある大きな理由の1つは、「粘着性のある」フォームです。提出を試みた後にその価値を保持するフォームです。

これを行うには、私たちが取るべき行動を「機能化」するだけです。基本的には、それを行う関数を作成してから、イベントハンドラから呼び出すか、ページが準備できたらonReadyイベントから呼び出します。直接イベントハンドラに配置する代わりに。

したがって、オレンジはconsumableで、緑色はnon-consumableです。私は何かが見えるようにしたので、showtimeのorangeボックスを追加しました。それから隠された場所を開いたままにするために、緑色のボックスに囲んでラップしました。主にこれは、ボックスが隠されたときに選択要素がジャンプするのを防ぐことでしたが、コントラストも気に入っていました。

それらの（すべての）ほとんどは逃したもう一つはこれです：私は

は説明

(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

サブ文字列に一致する正規表現を使用しました。これはあなたがそれらを混乱させたことがない場合は少し複雑ですが、それはマッチするための最良の方法です。 REGXの終わりを|
/\bnon\-consumable\b/ 
だから

/は、その開始をマークするために使用される区切り文字と呼ばれ、これを打破するために：私は、私は少しを使用するパターンを説明します

\bは、単語境界に一致します。たとえば、を使用して、この文字列の単語境界をマークする場合|foobar| |is| |a| |word|。その目的は、サブ文字列fooを検索すると、foobarに一致させることができますが、\bfoo\bを検索すると、fooとbarの間に単語境界がないため一致しません。これは、サブ文字列の誤った一致を防ぐのに役立ちます。

「手紙」は単なる文字と文字

の一致文字通り手紙は、その後、我々はnew RegExpの第2引数はフラグですREGX

を終了クロージングdelimter /を持っている、私はiを使用大文字と小文字を区別しない一致の場合は、フラグを使用します。

詳細情報については、私が言及する義務を感じるhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp

ことの一つは、あなたが、配列括弧で選択borrowitem[]の名前を持っています。

パス複数選択ボックスのために複数のフラグを設定し、サーバー

にこの名前の要素と

両方のそれは複数選択します：これは通常、1 2の理由で行われていますこれらのコードにはいくつかの変更が必要です。しかし、3つ目の選択肢があります。

出典

2017-11-01 07:25:18 ArtisticPhoenix

ありがとうございました。borrowitem []は複数選択されていました。私はちょうどそれが本当にありがとうが、コードを変更することを無視して好きではなかった。 –

値なしの選択肢の中で部分文字列を検索する

答えて

関連する問題