如何创建变量以跟踪我的html选择选项

Question

此代码在5个不同的图像之间切换，工作正常。我需要的是一个变量来跟踪我选择的选项。我不能使用值选项，因为我使用它作为图像路径，我不能做任何字符串操作，因为我需要值选项的确切值来显示当前页面上的图像。我需要另一个变量传递给PHP页面，该页面将表字段名称保存到包含字段image_1，image_2，image_3，image_4或image_5的sql表。简而言之，如果选择“Image 1”选项，我需要一个变量来告诉它在我的sql表中写入字段“image_1”的路径。如果选择“图像2”，它将写入字段“image_2”等...

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

<option value="' .$shop_name_pdo . '/images/' . $p_image_1 . ' " selected>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>

<img id="imageToSwap" class="profile" src="' .$shop_name_pdo . '/images/' . $p_image . ' ">

在下面添加了Jquery

$( "option" ).click(function() {
var index = $( "option" ).index( this );
$( "span" ).text( "Image Selected #" + (index+1));
});

Answer 1

这不是HTML应该如何工作。 value属性旨在包含您要在提交事件中传递的值，因此它应包含一个唯一标识符，允许您在处理$ _POST数组时检索服务器端的所有详细信息。

说这个，如果你还想传递两个值，可能的解决方法是：

• 设置要传递给class属性的值，并使用$(this).attr("class")检索它。然后你必须手动将它添加到ajax请求参数（如果你使用ajax）*。
• 获取所选元素的index并传递它而不是image_1, image_2 etc.。但是，您需要手动将其包含在$ POST数组中*。
• 在每个选项后添加禁用的隐藏输入。隐藏的输入包含您要传递的值。当您选择一个图像时，禁用所有输入并仅启用相应的一个$(this).next().prop('disabled', false);，这样只有这个将包含在$ POST数组中。

但你真的应该重新思考为什么简单的事情复杂化。

---

*要手动将值添加到HTTP请求，您可以在表单中添加隐藏的输入，并在单击事件后使用jquery设置其值。否则，如果您使用的是ajax，则将其添加到请求数据中。

Answer 2

给每个选项一个name标签然后你可以通过$_POST['name']看到值。例如<option name="image_1"....>将是$_POST['image_1']等

Answer 3

这非常有效，感谢每个人的投入

<span>Click a option!</span>

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

<option name="image_1" value="' .$shop_name_pdo . '/images/' . $p_image . ' " selected>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 #" + (index+1));
});
</script>