如何将select选项指定给另一个变量

Question

我需要跟踪我选择1到5的选项。我不能使用值选项，因为我使用它来存储图像。所以我算一下选项的数量。下面的代码在Firefox中运行良好，但似乎脚本不能在Chrome或Safari下运行。还没试过IE或者边缘。有什么想法吗？例如：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">

Answer 2

将代码更改为以下代码尝试更改以下行

var index = $( "option" ).index( this ); 

至

var index = $( "option:selected" ).index( this );