選択されたリンク/テキスト入力を出力回答として掲示する方法

Question

私は2つの写真とテキストボックスとセレクタを持っていればかなりシンプルです。私はクリックした写真、テキストボックスに入力されたもの、選択したオプションを示す出力をしたい。たとえば：

JSFiddle - jqueryのを使用してhttps://jsfiddle.net/vdqz2esz/2/

<!--STYLE--> 
    <img src="Images/casual3.jpg"> 
     <a class="btn btn-primary btn-lg" href="#div2" role="button" value="casual" id="casual">Casual &raquo;</a> 

    <img src="Images/Street2.jpg"> 
     <a class="btn btn-primary btn-lg" href="#div2" role="button" value="street" id="street">Street &raquo;</a> 

<!--height--> 
    <form> 
        Height:<br> 
        <input type="text" name="height" id="height"><br> 
    </form> 

<!--shirt size--> 
    <select> 
         <option value="small" id="small">Small</option> 
         <option value="medium" id="medium">Medium</option> 
         <option value="large" id="large">Large</option> 
         <option value="xlarge" id="xlarge">X-Large</option> 
         <option value="xxlarge" id="xxlarge">XX-Large</option> 
    </select> 
<a class="btn btn-primary btn-lg" href="#" role="button">Submit &raquo;</a> 
<!--output here--> 
<p id="style1">Style:</p> 
<p id="height1">Height:</p> 
<p id="shoes1">Shoes:</p> 

、どのように私はこれを行うに行きますか？

このようなものを試していましたが、動作しませんでした。ここのわらで掴んでいます...

$('#height1').html("#height"); 

ありがとうございました。

Answer 1

コードには多くの部分がありません。

フィドルんjQueryのリファレンスは、まだ始まったばかり

<p>タグ

あなたの出力内のいくつかの <span>を追加するソリューションまず

このUpdated Fiddleを試している

<!--output here--> 
<p id="style1">Style:<span></span></p> 
<p id="height1">Height:<span></span></p> 
<p id="shoes1">Shoes:<span></span></p> 

あなたのjQueryのコードは次のようになります

$('.submit').click(function(){ 
    $('#height1 span').text($('select option:selected').val()); 
    $('#shoes1 span').text($('#height').val()); 
}); 

Answer 2

以下のスニペットを参照してください。このスニペットは、入力フィールドと選択ボックスの値を表示する方法を示しています。このアプローチは、フォーム要素ではないため、イメージでは機能しません。画像をラジオボタンのように動作させる方法については、this question on SOを参照してください。

$('.submit').click(function() { 
 
    $('#height1').html($('input#height').val()) 
 
    $('#shoes1').html($('select').val()) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!--STYLE--> 
 
<img src="Images/casual3.jpg"> 
 
<a class="btn btn-primary btn-lg" href="#div2" role="button" value="casual" id="casual">Casual &raquo;</a> 
 

 
<img src="Images/Street2.jpg"> 
 
<a class="btn btn-primary btn-lg" href="#div2" role="button" value="street" id="street">Street &raquo;</a> 
 

 
<!--height--> 
 
<form> 
 
    Height: 
 
    <br> 
 
    <input type="text" name="height" id="height"> 
 
    <br> 
 
</form> 
 

 
<!--shirt size--> 
 
<select> 
 
    <option value="small" id="small">Small</option> 
 
    <option value="medium" id="medium">Medium</option> 
 
    <option value="large" id="large">Large</option> 
 
    <option value="xlarge" id="xlarge">X-Large</option> 
 
    <option value="xxlarge" id="xxlarge">XX-Large</option> 
 
</select> 
 
<a class="btn btn-primary btn-lg submit" href="#" role="button">Submit &raquo;</a> 
 
<!--output here--> 
 
<p id="style1">Style:</p> 
 
<p>Height: <span id="height1"></span></p> 
 
<p>Shoes: <span id="shoes1"></span></p>

また、私は構造を少しあなたのHTMLを改善することをお勧めします。 inputとselectのようなすべてのフォーム要素は、formタグの子である必要があります。