1

私のサイトにはドロップダウン リストがあり、各オプションには URL があります。いずれかのオプションを選択してボタンをクリックすると、対応する URL が同じタブで開きます。

問題: 私のフォームは機能しますが、同じページに2 つの別々のフォームが必要です。現在、最初のフォームのみが機能しています。したがって、2 番目のフォームのボタンをクリックすると、会社のフォームから結果が表示されます。たとえば、最初のフォームで「オプション A」を選択し、2 番目のフォームで「オプション C」を選択しました。2 番目のフォームで「送信」をクリックすると、最初のフォームの「オプション A」から URL が開きます。

両方のドロップダウンが同じページで個別に機能する限り、現在のコード/スクリプトを完全に変更できます。

コードは次のとおりです。

HTML

<form class="spec-table" name="dropdown">
  <tr>
    <td>
      <input type="hidden" name="on0" value="This is my drop down" />
      This is my drop down
    </td>
  </tr>
  <tr>
    <td>
      <select name="selected" id="target" accesskey="E" class="spec-field1">
        <option selected value="URL-1">Option A</option>
        <option value="URL-2">Option B</option>
        <option value="URL-3">Option C</option>
        <option value="URL-4">Option D</option>
      </select>
    </td>
  </tr>
  <input type="button" class="button-spec" value="Visit Link!"
         onclick="goToNewPage(document.dropdown.selected)">
</form>

Javascript

function goToNewPage() {
  if(document.getElementById('target').value) {
    window.location.href = document.getElementById('target').value;
  }
}
4

2 に答える 2

0

複数の要素に同じIDを割り当てることはできません..IDは一意である必要があります..そのため、異なるIDで2つの選択を作成し、goToNewPage関数を次のように変更する必要があります

function goToNewPage(i) {
                if(document.getElementById('target' + i).value){
                    window.location.href = document.getElementById('target' + i).value;
                }
            }

ほんの一例..

<form>
  <select  id="target1" accesskey="E" >
    <option selected value="http://www.google.com">Google</option>
                <option value="URL-2">Option B</option>
                <option value="URL-3">Option C</option>
                <option value="URL-4">Option D</option>
                </select>
       <input type="button"  value="Visit Link!"
 onclick="goToNewPage(1)">
  </form>
  <br>

  <form>
    <select  id="target2" accesskey="R" >
      <option selected value="http://www.bing.com">Bing</option>
                <option value="URL-2">Option B</option>
                <option value="URL-3">Option C</option>
                <option value="URL-4">Option D</option>
                </select>
         <input type="button"  value="Visit Link!"
 onclick="goToNewPage(2)">
  </form>
于 2013-10-13T09:23:34.523 に答える
0

これは、コードがselectID を使用して要素を識別しているためです。このフォームの複数のインスタンスを同じページに作成し、 を使用して要素をロードすると、要素getElementByIdの最初のインスタンスが取得されますselect。

修正は、class名前を使用してselect要素を識別することです。

これはあなたのために働くはずです：

<form class="spec-table" name="dropdown">
    <tr>
        <td>
            <input type="hidden" name="on0" value="This is my drop down" />This is my drop down</td>
    </tr>
    <tr>
        <td>
            <select name="selected" class="target" accesskey="E" class="spec-field1">
                <option selected value="URL-1">Option A</option>
                <option value="URL-2">Option B</option>
                <option value="URL-3">Option C</option>
                <option value="URL-4">Option D</option>
            </select>
        </td>
    </tr>
    <input type="button" class="button-spec" value="Visit Link!"/>
</form>

<form class="spec-table" name="dropdown">
    <tr>
        <td>
            <input type="hidden" name="on0" value="This is my drop down" />This is my drop down</td>
    </tr>
    <tr>
        <td>
            <select name="selected" class="target" accesskey="E" class="spec-field1">
                <option selected value="URL-5">OptionE</option>
                <option value="URL-6">Option F</option>
                <option value="URL-7">Option G</option>
                <option value="URL-8">Option H</option>
            </select>
        </td>
    </tr>
    <input type="button" class="button-spec" value="Visit Link!"/>
</form>

JS:

$(".target").change(function(){
    console.log(this.value);
});

もちろん、実行したいアクションを実行するには、そのコールバック メソッドを変更する必要があります。

于 2013-10-13T09:34:50.387 に答える