Question

继昨天发布的一个问题之后。在此处找到：Append different div id to option selects?

这很棒......

我只需要添加一个额外的调整，我几乎可以根据需要进行调整。

概要

用户从选择菜单中选择选项。该选项会触发div ID。

我还需要它来改变输入ID。

这可以吗？

我的典型jQuery是：

$(document).ready(function() {
$("#selectanimage").change(function(){
$("#masterPreview > div").hide();
$("#" + $(this).val()).show();
});
});

选择是：

<select id="selectanimage" name="selectanimage" style="width: 474px;" class="required">
<option value="null">--- Select your Image ... ---</option>
<option value="oneblk">125px x 125px Black Background</option>
</select>

这触发的DIV是：

<div id="masterPreview">
<div id="oneblk">Apple Div</div>
</div>

但是我还有一个输入元素，我希望根据所选的选项同时更改ID。

它只是一个常规输入元素。

任何建议（顺便提一下输入ID）将根据选项选择而有所不同，它必须与选项选择中的ID不同（出于CSS原因）

EDIT ----------------------------------

这里小提琴：＆gt;＆gt; http://jsfiddle.net/ozzy/d5s9T/

基本上（仅为第一个选择编码）但你应该明白这一点。

如果他们选择第一个选项，我需要输入id成为oneblkinput）

如果他们选择了第二个选择选项，我需要输入id成为onewhtinput

Etc

Answer 1

编辑：

我更新了您的jsFiddle

$(document).ready(function() {
   $("#selectanimage").change(function(){
      $("#masterPreview > div").hide();
      $("#" + $(this).val()).show();
      $(".add_my_text").attr('id',$(this).val());
   });
});

Answer 2

你可以做到这一点：

$(document).ready(function() {
$("#selectanimage").change(function(){
$("#masterPreview > div").hide();
$("#" + $(this).val()).show();
$("#currentInputID").attr("id", "NewIDName");
});
});

但我不认为改变Id是明智的选择。通过考虑选择的选项，您可以使用具有相同名称的相同输入执行不同操作的函数。

Answer 3

假设你有办法“选择”输入......

$(document).ready(function() {
    $("#selectanimage").change(function(){
        $("#masterPreview > div").hide();
        $("#" + $(this).val()).show();
        // The below line would update the ID of the element
        $("input.add_my_text").attr("id", $(this).val() + "input");
    });
});

请注意，您不能使用$（“＃inputID”），因为该ID会发生变化。

Updated fiddle

选择框选项以更改输入元素ID

3 个答案: