1つのスパンで2つ以上の選択された値を結合する

-2

jQueryまたはJavaScriptを使用して選択範囲を1つのスパンで結合したいとします。私が選択したオプションに応じてProduct1/Sub1を示したいspanで1つのスパンで2つ以上の選択された値を結合する

<body> 
    <label>Product:</label> 
    <select id='Product' value='Product'> 
     <option value=" " selected>--Select your Product--</option> 
     <option>Option 1</option> 
     <option>Option 2</option>   
    </select> 

    <label>Subproduct:</label> <select id='SubProd' value='SubProd'> 

    <option value=" " selected>--Select your Subproduct--</option> 
     <option>Sub 1</option> 
     <option>Sub 2</option> 
    </select> 
    <br> 
    <span id="joined"></span> 
</body>

：

これは私のHTMLコードです。私は検索してきましたが、私にとって役に立つものは見つけられません。あなたの質問は少し不明瞭なようですが、これは

$('#Product,#SubProd').on('change',function(){ 
     $('#joined').html($('#Product').find('option:selected').text() + "/" + $('#SubProd').find('option:selected').text()); 
});

PSを動作するかどう

出典

2017-11-28 Ts Team

リアルタイム更新値を取得するには、changeイベントを使用する必要があります。

$("#Product, #SubProd").on('change', function() { 
 
    $("#joined").text($("#Product").val() + "/" + $("#SubProd").val()) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label>Product:</label> <select id='Product' value='Product'> 
 

 
<option value=" " selected>--Select your Product--</option> 
 
     <option>Option 1</option> 
 
     <option>Option 2</option>   
 
     </select> 
 

 
<label>Subproduct:</label> <select id='SubProd' value='SubProd'> 
 

 
<option value=" " selected>--Select your Subproduct--</option> 
 
     <option>Sub 1</option> 
 
     <option>Sub 2</option> 
 
     </select> 
 
<br> 
 
<span id="joined"></span>

出典

2017-11-28 04:02:54

感謝changeイベントは常にあなたに更新された値を与えるので、あなたが直接、代わりにoption:selectedの値を取得するために$("#Product").val()を使用することができます最初は機能していませんでしたが、機能に少し変更を加えました。D $（function（）{ $（ '＃Product、#SubProd'）change（function {）{ $（ '＃joined'）。$（ '＃Product'）+ $（ '＃SubPro d '）。val（））;}）;}）; –

、チェック：あなたは「オプションを選択し、」タグを表示しないようにするいくつかのチェック条件を持っている必要があります。

出典

2017-11-28 03:37:18 Varun

フィドル：https://jsfiddle.net/j10mcjgo/ – Varun

1つのスパンで2つ以上の選択された値を結合する

答えて

関連する問題