如何从 jQuery 的下拉列表中选择一个值？答案

【问题标题】：How do I select a value from a drop down list in jQuery?如何从 jQuery 的下拉列表中选择一个值？
【发布时间】：2020-05-16 00:18:04
【问题描述】：

当您从下拉列表中选择要使用的字体时，我正在尝试更改旁边的字体。

但是，我的代码将获取的唯一值是列表的第一个选项。当我单击另一种字体时，什么也没有发生。如何选择其他值？谢谢。

var fontVal = $("select option").attr("value");

alert(fontVal);

function fontChoice(){
	if(fontVal == "Choose"){
		$('#mirror').css({"font-family":"sans-serif"});
		console.log('Choose');
	}else if(fontVal == "Arial"){
		$('#mirror').css({"font-family":"Arial"});
		console.log('Courier');
	}else if(fontVal == "Times"){
		$('#mirror').css({"font-family":"Times New Roman"});
		console.log('Times');
	}else if(fontVal == "Impact"){
		$('#mirror').css({"font-family":"Impact"});
		console.log('Impact');
	}else if(fontVal == "Courier"){
		$('#mirror').css({"font-family":"Courier"});
		console.log('Courier');
	};
};

fontChoice();

<aside id="mirror">
</aside>
<select id="fonts">
	<option value="Choose">Choose your font</option>
  		<option value="Arial">Arial</option>
  		<option value="Times">Times New Roman</option>
  		<option value="Impact">Impact</option>
  		<option value="Courier">Courier</option>
</select>

【问题讨论】：

试试这个小提琴jsfiddle.net/s9v4mvfv
你需要将你的函数绑定到 select 元素的 change 事件上。

标签： jquery

【解决方案1】：

您应该使用select 的change 事件来获取选定的值。

试试这个：

$(function(){
    $('#fonts').on('change', function(){

        switch ($(this).val()) {
            case 'Choose':
                $('#mirror').css({"font-family":"sans-serif"});
                break;
            case 'Arial':
                $('#mirror').css({"font-family":"Arial"});
                break;
            case 'Times':
                $('#mirror').css({"font-family":"Times New Roman"});
                break;
            case 'Impact':
                $('#mirror').css({"font-family":"Impact"});
                break;
            case 'Courier':
                $('#mirror').css({"font-family":"Courier"});
                break;            
        }

    });
});

这是一个有效的 JS Fiddle。

【讨论】：

这太完美了！！太感谢了！ :)
太棒了。如果对您有帮助，请将其标记为答案。
只需要取出案例 4：P
很抱歉。没注意到。 ;)
更新了我的答案。如果对你有帮助，请采纳。

【解决方案2】：

在我看来，使用 switch 语句有点过头了。此外，您在选项元素中有完整的字体名称。您还可以利用三元运算符将代码减少到一行。

$('#fonts').on('change', function() {
    $('#mirror').css({ 
        "font-family": this.value.trim() == 'Choose' ? 
        'sans-serif' : $('option:selected', this).text() 
    });
});

.demo {
    font-size: xx-large;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<aside id="mirror" class="demo">
      Sample Text
	</aside>
	<select id="fonts">
		<option value="Choose">Choose your font</option>
  		<option value="Arial">Arial</option>
  		<option value="Times">Times New Roman</option>
  		<option value="Impact">Impact</option>
  		<option value="Courier">Courier</option>
	</select>

【讨论】：

你的答案是最短的，比我的好。
很高兴收到您的投票 :-) 谢谢。你的也是正确的。 @Sushil

【解决方案3】：

function fontChoice() {
  var fontVal = $("select").find(':selected').val();

  alert(fontVal);


  if (fontVal == "Choose") {
    $('#mirror').css({
      "font-family": "sans-serif"
    });
    console.log('Choose');
  } else if (fontVal == "Arial") {
    $('#mirror').css({
      "font-family": "Arial"
    });
    console.log('Courier');
  } else if (fontVal == "Times") {
    $('#mirror').css({
      "font-family": "Times New Roman"
    });
    console.log('Times');
  } else if (fontVal == "Impact") {
    $('#mirror').css({
      "font-family": "Impact"
    });
    console.log('Impact');
  } else if (fontVal == "Courier") {
    $('#mirror').css({
      "font-family": "Courier"
    });
    console.log('Courier');
  };


};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<aside id="mirror">
</aside>
<select id="fonts" onchange="fontChoice();">
  <option value="Choose">Choose your font</option>
  <option value="Arial">Arial</option>
  <option value="Times">Times New Roman</option>
  <option value="Impact">Impact</option>
  <option value="Courier">Courier</option>
</select>

你应该使用$("select").find(':selected').val();在select标签中添加了一个onchange属性

【讨论】：