0

optgroup タグ内の option タグの値として示されている URL にアクセスするために、JavaScript (または jQuery ライブラリ) を使用する方法を学びたいと考えています。

オプション タグを含むシンプルな 1 レベルの select タグを使用すると、ソリューションはこの投稿で説明されているものと同様になります。

<FORM NAME="nav"><DIV>
<SELECT NAME="SelectURL" onChange=
"document.location.href=
document.nav.SelectURL.options[document.nav.SelectURL.selectedIndex].value">
<OPTION VALUE="http://www.cs.tut.fi/~jkorpela/forms/jsnav.html"
SELECTED>Please select an item:
<OPTION VALUE="http://www.cs.tut.fi/~jkorpela/forms/">
Main page on HTML forms
<OPTION VALUE="http://www.cs.tut.fi/~jkorpela/forms/choices.html">
Choices in HTML forms
<OPTION VALUE="http://www.cs.tut.fi/~jkorpela/forms/tables.html">
Tables and forms
<OPTION VALUE="http://www.cs.tut.fi/~jkorpela/forms/methods.html">
Form submission methods (GET and POST)
</SELECT><DIV>
</FORM>

optgroup タグ内にオプション タグを含む 2 レベルの select タグで使用しようとしましたが、うまくいきません。このコードの適応にご協力いただければ幸いです。

4

2 に答える 2

2

ユーザーがオプションを選択したときにこれを行うには、これを使用します。

$('select[name="SelectURL"]').change(function() {
    window.location.replace($(this).val());
});

または、ユーザーが送信ボタンをクリックすると、次のようになります。

$('form[name="nag"]').on('submit' function(e){
    e.preventDefault();
    window.location.replace($('select[name="SelectURL"]').val());
});

また、次のように HTML をクリーンアップする必要があります。

<FORM NAME="nav">
    <DIV>
        <SELECT NAME="SelectURL">
            <OPTION VALUE="http://www.cs.tut.fi/~jkorpela/forms/jsnav.html" SELECTED>Please select an item:</OPTION>
            <OPTION VALUE="http://www.cs.tut.fi/~jkorpela/forms/"> Main page on HTML forms</OPTION>
            <OPTION VALUE="http://www.cs.tut.fi/~jkorpela/forms/choices.html"> Choices in HTML forms</OPTION>
            <OPTION VALUE="http://www.cs.tut.fi/~jkorpela/forms/tables.html"> Tables and forms</OPTION>
            <OPTION VALUE="http://www.cs.tut.fi/~jkorpela/forms/methods.html"> Form submission methods (GET and POST)</OPTION>
        </SELECT>
    <DIV>
</FORM>
于 2013-05-23T16:53:39.440 に答える
0

まず、インラインの onChange イベント ハンドラを取り除きます。

<FORM NAME="nav"><DIV>
<SELECT NAME="SelectURL">
<OPTION VALUE="http://www.cs.tut.fi/~jkorpela/forms/jsnav.html"
SELECTED>Please select an item:
<OPTION VALUE="http://www.cs.tut.fi/~jkorpela/forms/">
Main page on HTML forms
<OPTION VALUE="http://www.cs.tut.fi/~jkorpela/forms/choices.html">
Choices in HTML forms
<OPTION VALUE="http://www.cs.tut.fi/~jkorpela/forms/tables.html">
Tables and forms
<OPTION VALUE="http://www.cs.tut.fi/~jkorpela/forms/methods.html">
Form submission methods (GET and POST)
</SELECT><DIV>
</FORM>

次に、イベント リスナーを追加します。

$(document).ready(function() 
{ 
  $('select[name=SelectURL]').change(function(v)
  {
    window.location.replace( $(this).val() );
  });
});
于 2013-05-23T16:56:05.420 に答える