JavaScriptにて、<select>の値を変更出来ない

Question

Javascriptを用いて、ECサイト上の項目に自動入力することに取り組んでいます。

下記のような<select>があり、

<select id="sample">
 <option value="">素材を選択</option>
 <option value="0">その他の素材</option>
 <option value="1">紙</option>
</select>

下記のようなJavaScriptをConsoleから実行したところ、
ドロップダウンリストの値が変更されず、困っています。

document.querySelector("#sample").value = 1
document.querySelector("#sample").options[2].selected = true

※ドロップダウンリストの表示には、反映されておらず、

※クリックして表示すると、選択リスト上では選択されている。

念の為、下記コードにて、値が変更されているか確認したのですが、
値自体は変更されていました。

selectedIndexで調べると値は変更されているが、
ドロップダウンリスト上では、変更されていない、という状態です。

document.querySelector("#sample").selectedIndex
// => 2

値は変更されているから、そのまま「編集を完了する」ボタンを押して確定すれば、
問題ないのかなと思ったのですが、
内容が反映されていませんでした。

補足情報（FW/ツールのバージョンなど）

・ MacOS 10.14.6
・ Safari 14.1.1

Comments

[int32_t]

「ドロップダウンリスト上では」はどういう意味でしょうか? ページ上のメニューを開いていない<select>の中身ではなくて、メニューを開くと期待と違う表示なのでしょうか? ドロップダウンリストは本当に <select> が表示しているものですか? スクリーンショットを載せられますか?

[mmi]

ご指摘ありがとうございます。スクリーンショットを追加しました。

[int32_t]

情報の更新ありがとうございます。
その「ECサイト」のURLを開示することはできますか? 画面上で「素材を選択」を表示しているのは本当にターゲットの <select> 要素ですか?

シンプルなHTMLでは問題が再現しないので、問題を再現できるよう情報を提供する必要があります。

[mmi]

ECサイトのURLは下記となります。
https://jp.pinkoi.com/panel/listings/new

ただ、会員登録が必要なサイトなので、
このような場合、コードをどこかにアップロードするなどしたほうが宜しいでしょうか?

[int32_t]

サイトのコードを勝手にコピーして公開するのは著作権的にダメでしょう。

* 会員登録しなくても問題を再現できるURLを見つける。または
* サイトのHTML/JSコードを分析して質問者さん自身が問題を再現できるコードを作り上げる

でしょうか。

[mmi]

ご回答ありがとうございます。
実際に、<select>タブ周りだけを抜き出してみて、
htmlコードを作成してみたのですが、その場合ですと、
問題なく、値の変更が出来ました。

Answer 1

pulldown_option = document.getElementById("sample").getElementsByTagName('option');
pulldown_option[2].selected = true;

Comments

[amon1020]

もし、select2を使っているのであれば
「$('#mySelect2').val(null).trigger('change');」でどうでしょう

Answer 2

document.querySelector('#sample [value="1"]').selected=true;

Comments

[mmi]

ご回答ありがとうございます。
実際には、下記のようなセレクタなのですが、その場合ですと、
上記は、どのような記述にすれば良いでしょうか?
#n-shop-manager-main > div > div > div.m-react-listing-editor > div:nth-child(6) > div > div:nth-child(2) > div:nth-child(1) > div.g-grid-wrapper-8-4.p-12-12 > div:nth-child(1) > div > select

[yambejp]

そんな複雑なセレクタをつかうくらいならid振るほうが
確実だと思いますが・・・ご提示のセレクタがただしければ
#sampleを提示されたものに変更すればよいでしょう

[mmi]

ご回答ありがとうございます。
下記の記述でやってみたのですが、エラーが出てしまいました。
何がいけないのでしょうか?

document.querySelector('#n-shop-manager-main > div > div > div.m-react-listing-editor > div:nth-child(6) > div > div:nth-child(2) > div:nth-child(1) > div.g-grid-wrapper-8-4.p-12-12 > div:nth-child(1) > div > select [value="1"]').selected=true;

TypeError: null is not an object (near '...select [value="1"]').selected=true;...')

Answer 3

document.querySelector("#sample").selectedIndex = 2;を明示的に実行しないとドロップダウンリストに反映されないのかもしれません。まずはそれをやってみてください。

Comments

[mmi]

ご回答ありがとうございます!
試してみたのですが、ドロップダウンリストへの反映は上手く行きませんでした。