Question

我有一个下拉列表，用于更改定义的DIV中的图像。加载页面时，默认情况下不会选择任何图像，只有当您选择下拉选项时才会显示。我希望它从页面加载列表中选择第一个选项。

<div id="eyelash_style_img"></div>

<select id="eyelash_style_select" name="os0">
  <option value="select">-Choose a Style-</option>
  <option value="L004">L004 </option>
  <option value="L005">L005 </option>
  <option value="L010">L010 </option>
  <option value="L021">L021 </option>
  <option value="L024">L024 </option>
  <option value="L038">L038 </option>
</select>

<script type="text/javascript">

$("#eyelash_style_select").change(function() {  
 $("#eyelash_style_img").html($("<img />", { src: "<?=HTTP_HOST;?>Shopping/Images/" + $(this).val() + ".jpg" })); });

</script>

Answer 1

使用selected属性

<select id="eyelash_style_select" name="os0">
        <option value="select">-Choose a Style-</option>

     <option value="L004"  selected>L004 </option>
        <option value="L005">L005 </option>
        <option value="L010">L010 </option>
        <option value="L021">L021 </option>
        <option value="L024">L024 </option>
        <option value="L038">L038 </option>
    </select>

<强>使用Javascript：

 $(document).ready(function () {
(
$("#eyelash_style_img").html($("<img />", { src: "<?=HTTP_HOST;?>Shopping/Images/" + $(this).val() + ".jpg" })); });
});

此脚本在pageLoad之后加载图片，只需在change中添加document.ready功能即可加载所选的默认图片，您需要both

$("#eyelash_style_select").change(function() {  
 $("#eyelash_style_img").html($("<img />", { src: "<?=HTTP_HOST;?>Shopping/Images/" + $(this).val() + ".jpg" })); });

Answer 2

只需将所选属性设置如下。

<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>

Answer 3

创建页面onload事件，并在页面加载后选择列表中的第一个选项。

$(document).ready(function () {
(
    $("#eyelash_style_select").prop('selectedIndex', 0);
});

选择要在页面加载时加载的默认图像

3 个答案: