在引導標籤輸入中顯示錶單值

Question

我有一個選擇，輸入和按鈕的形式，我想要的是當我點擊按鈕來獲取選擇和輸入的值，我設法做到這一點，他們顯示在警報中，我的問題是，我如何連接這兩個檢索的值並將它們顯示在一個警報中？並可以顯示他們在引導標籤輸入，而不是一個警報？這裏是我的代碼：

$(document).ready(function() { 
 
    $('button').click(function() { 
 
    alert($('input').val()); 
 
    alert($('select').val()); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
<select> 
 
<option>1</option> 
 
<option>2</option> 
 
<option>3</option> 
 
<option>4</option> 
 
</select> 
 
<br> 
 
<input type="text"> 
 
<button type="button">Get values</button> 
 
</form>

在引導輸入標籤

，我該怎麼辦呢？這裏是我的代碼：

Answer 1

當然可以。檢查我對代碼的更改。

$(document).ready(function() { 
 
    $('button').click(function() { 
 
    var str = 'Input value: ' + $('input').val() + ' select value: ' + $('select').val(); 
 
    // Alerting your values 
 
    alert(str); 
 
    // Writing them to html element 
 
    $('#element').html(str); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
<select> 
 
<option>1</option> 
 
<option>2</option> 
 
<option>3</option> 
 
<option>4</option> 
 
</select> 
 
<br> 
 
<input type="text"> 
 
<button type="button">Get values</button> 
 
</form> 
 
<span id="element"></span>

Answer 2

要在相同的警報獲得兩個值做到這一點：

$(document).ready(function() { 
    $('button').click(function() { 
    var first = $('input').val(); 
    var second = $('select').val(); 
    alert(first + second); 
    }); 
}); 

獲得「警報」有由基金會提供的樣式，你將不得不像https://foundation.zurb.com/sites/docs/v/5.5.3/components/reveal.html

這有點複雜。

Answer 3

您知道如何從輸入中獲取值，並知道如何從選擇中獲取值。

所有你現在需要做的是使用JavaScript的.concat（）方法：

const combinedValue = $('input').val().concat($('select').val());

$(document).ready(function() { 
 
    $('button').click(function() { 
 
    const combinedValue = $('input').val().concat($('select').val()); 
 
    alert(combinedValue); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
<select> 
 
<option>1</option> 
 
<option>2</option> 
 
<option>3</option> 
 
<option>4</option> 
 
</select> 
 
<br> 
 
<input type="text"> 
 
<button type="button">Get values</button> 
 
</form>