Question

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

<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属性旨在包含您要在submit事件中传递的值，因此它应包含一个唯一标识符，允许您在处理$ _POST数组时检索服务器端的所有详细信息。 / p>

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

将您要传递的值设置为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>

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

3 个答案: