Question

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

但是，我的代码唯一可以获取的值是列表的第一个选项。当我点击另一种字体时，没有任何反应。如何选择其他值？谢谢。

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>

Answer 1

您应该使用change的{{1}}事件来获取所选值。

试试这个

select

这是一个有效的 JSFIDDLE 。希望这有帮助。

Answer 2

使用switch语句对我来说太过分了。您还可以在选项元素中使用完整的字体名称。您还可以利用三元运算符将代码减少到一行。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 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属性

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

3 个答案: