在引导标签输入中显示表单值

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>