How do I assign my select option to another variable

Question

I need to keep track of what option I have selected 1 thru 5. I can't use the value option as I use that to store the image. So I count the number of options. The code below works great in Firefox, but seems like the script doesn't run under Chrome or Safari. Have not tried IE or edge yet. Any Ideas please? Example at: 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>

I don't understand, why you need to bind 'click' on option as you can handle it 'onchange' event. `onchange` must be bind with a function where you can store your selected option. — varsha ghodki, Dec 21 '17 at 08:05
look at this : https://stackoverflow.com/questions/7080213/jquery-click-event-not-working-on-option-element — Ardi Ardianto, Dec 21 '17 at 08:08

score 2 · Accepted Answer · edited Dec 21 '17 at 08:14

2

Use a change event

$( "#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">

edited Dec 21 '17 at 08:14

Prateik Darji

2,297
1
13
29

answered Dec 21 '17 at 08:04

madalinivascu

32,064
4
39
55

Perfect, that did the trick. At first it still didn't work so I ran your code snippet, then viewed source. I found I was missing in the header. Once I added, it all came to life. Thanks guys – Ricky T Dec 21 '17 at 08:29
Dumb question, how do I say you answered my question so you get a green check mark? – Ricky T Dec 21 '17 at 08:30
under the voting number you have a check, you click that :) https://meta.stackexchange.com/a/5235 – madalinivascu Dec 21 '17 at 08:31
1

Oh my gosh, I really am not that stupid. I looked every where but didn't do that. Thanks again! – Ricky T Dec 21 '17 at 08:33

score 0 · Answer 2 · edited Dec 21 '17 at 08:17

0

Change your code to the following code try to change the following line

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

to

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

edited Dec 21 '17 at 08:17

Prateik Darji

2,297
1
13
29

answered Dec 21 '17 at 08:06

Michael Sanchez Esmero

78
12

what is `.index( this )` suppose to mean? – guradio Dec 21 '17 at 08:18

How do I assign my select option to another variable

2 Answers2