ホーム>source

私はこのような非常に基本的なフォームを持っているとしましょう:

<form action="https://www.website.com/">
    <select name="1option">
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
    </select>
    <select name="2option">
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
    </select>
</form>

selectタグに「name」を含めることにより、選択したオプションが次のようなURLを生成します。 https://www.website.com/?option1=A&option2=B

次のように、パラメーターのリストの前に最初に選択されたオプション(option1)を適用したいと思います。

https://www.website.com/A/?option2=B

しかし、私は実際にそれを行う方法を知りません。

あなたの答え
  • 解決した方法 # 1

    option1が次のように変更されるたびに、アクションURLを変更できます。

    var option = document.querySelector('[data-name="1option"]');
    var form = document.querySelector('form');
    option.addEventListener('change', function() {
      form.setAttribute('action', 'https://www.website.com/' + option.value);
    });
    
    
    <form action="https://www.website.com/">
        <select data-name="1option">
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
        </select>
        <select name="2option">
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
        </select>
    </form>
    
    

    開発者ツールを開くと、そのアクションが変更され、その選択の名前がないため、クエリ文字列に追加されません。

    もう1つのオプションは、送信イベントを追加してから、アクション属性を変更することです。

関連記事

  • 前へ java - JPAクエリ:サブクエリをグループ化条件に結合する
  • 次へ sql server - メッセージ102、レベル15、状態1、プロシージャSP_Get_ZINTLL、行36 '、'付近の構文が正しくありません