修改功能前的默认值

Default value before change function

本文关键字：默认值 功能 修改      更新时间：2023-09-26

我有一个简单的下拉列表值。更改时，将值传递给变量place

place值传递给div，它从api加载数据。在我选择其中一个值之后，它可以正常工作，但我的初始值是空白的。

如何在单击选择列表之前存储默认值?

<select name="places">
  <option value="135264023">New York</option>
  <option value="116721348">Los Angeles</option>
  <option value="104279908">Dubai</option>
</select>
<div id="widget"></div>
<script>
$('select').change(function() {
  var place = $(this).val();
  console.log(place);
  // This call have to happen after div and <script> tag.
  widgetOptions({
    element: 'widget',
    placeId: place,
  });
});
</script>

您可以通过添加selected布尔属性将选项设置为默认值，但我的猜测是，您真正的问题是如何在开始时触发加载信息。

添加selected(尽管它很可能已经默认为第一个):

<select name="places">
  <option value="135264023" selected>New York</option><!-- Note change -->
  <option value="116721348">Los Angeles</option>
  <option value="104279908">Dubai</option>
</select>

…然后在脚本中:

var sel = $("select"); // You probably want this to be more specific
setupPlace(sel.val());
sel.change(function() {
  setupPlace($(this).val());
});
function setupPlace(place) {
  console.log(place);
  // This call have to happen after div and <script> tag.
  widgetOptions({
    element: 'widget',
    placeId: place,
  });
}

请注意我们是如何将逻辑隔离为一个函数的，然后我们从需要的两个地方调用该函数:Initialization和change。

或者，你看到人们做这样的事情(仍然使用selected属性):

$('select').change(function() {
  var place = $(this).val();
  console.log(place);
  // This call have to happen after div and <script> tag.
  widgetOptions({
    element: 'widget',
    placeId: place,
  });
}).trigger("change"); // <== Only change is here

我不喜欢使用假事件来触发处理程序，但我可以看到它的吸引力。这在很大程度上是一种风格选择。

var place = null;
$('select').click(function() {
	if(place === null) {
		place = $(this).val();  
	}
});
$('select').change(function() {
  //place = $(this).val();
  console.log(place);
  // This call have to happen after div and <script> tag.
  widgetOptions({
    element: 'widget',
    placeId: place,
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="places">
  <option value="135264023">New York</option>
  <option value="116721348">Los Angeles</option>
  <option value="104279908">Dubai</option>
</select>
<div id="widget"></div>

相关文章：