javascript - 如何将我的选择选项分配给另一个变量

Question

我需要跟踪我选择的 1 到 5 选项。我无法使用 value 选项，因为我使用它来存储图像。所以我数了数选项。下面的代码在 Firefox 中运行良好，但似乎该脚本无法在 Chrome 或 Safari 下运行。还没有尝试过 IE 或 Edge。有什么想法吗？示例:http://rtpcservices.com/count_options.php

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<span>Click a option!</span>

<select id="selected_image" name="selected_image" onchange="
$('#imageToSwap').attr('src', this.options[this.selectedIndex].value);">

<?php
echo '
    <option value="' .$shop_name_pdo . '/images/' . $p_image_1 . ' ">Image 1</option>
    <option value="' .$shop_name_pdo . '/images/' . $p_image_2 . ' ">Image 2</option>
    <option value="' .$shop_name_pdo . '/images/' . $p_image_3 . ' ">Image 3</option>
    <option value="' .$shop_name_pdo . '/images/' . $p_image_4 . ' ">Image 4</option>
    <option value="' .$shop_name_pdo . '/images/' . $p_image_5 . ' ">Image 5</option>
</select>
';
?>

<script>
$( "option" ).click(function() {
    // `this` is the DOM element that was clicked
    var index = $( "option" ).index( this );
    $( "span" ).text( "Image Selected_option #" + (index+1));
    document.getElementById("selected_option").value = index;    
});

</script> 

Answer 1

使用更改事件

$( "#selected_image" ).change(function() {
    var index = $( "option:selected" ).index();
    $( "span" ).text( "Image Selected_option #" + (index+1));
    $("#selected_option").val(index);
});

$( "#selected_image" ).change(function() {
    var index = $( "option:selected" ).index();
    $( "span" ).text( "Image Selected_option #" + (index+1));
    $("#selected_option").val(index);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selected_image" name="selected_image">
    <option value="' .$shop_name_pdo . '/images/' . $p_image_1 . ' ">Image 1</option>
    <option value="' .$shop_name_pdo . '/images/' . $p_image_2 . ' ">Image 2</option>
    <option value="' .$shop_name_pdo . '/images/' . $p_image_3 . ' ">Image 3</option>
    <option value="' .$shop_name_pdo . '/images/' . $p_image_4 . ' ">Image 4</option>
    <option value="' .$shop_name_pdo . '/images/' . $p_image_5 . ' ">Image 5</option>
</select>
<span></span>
<input type="text" id="selected_option">