プルダウンメニューを動的に変える

HTMLでフォームを作成しているのですが、text/javascriptに書いているフォームの内容を使ってプルダウンメニューを動的に変更できないでしょうか？

JavaScriptでHTMLのファイル名「00.html」から「00」を抜き出し、HTML内にある
「<script type="text/javascript">name00();</script>」の「name00」に代入したいです。

そうできればファイル名を変更するだけで中身は書き換えなくても良くなるので…

00.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="style.css" media="all">
<link rel="stylesheet" href="jQuality/css/validationEngine.jquery.css" type="text/css"/>
<script src="jQuality/js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="jQuality/js/languages/jquery.validationEngine-ja.js" type="text/javascript" charset="utf-8"></script>
<script src="jQuality/js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
   jQuery("#pngform").validationEngine();
});
</script>
<script type="text/javascript">
var url = window.location.href;
var filename = url.match(".+/(.+?).[a-z]+([?#;].*)?$")[1];
function set() {
var var2 = document.getElementById('hidden');
var2.value = filename;
}
</script>
<script type="text/javascript" src="js/PHPtemplate.js"></script>
<title>作品自動登録システム</title>
<meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-Control" content="no-cache"><meta http-equiv="Expires" content="Thu, 01 Dec 1994 16:00:00 GMT"></head>
<body>
<p class="title">PNG(イラスト)自動投稿フォーム　※管理者用</p>
<Hr>
<form id="pngform" action="pngworkform.php" method="post" enctype="multipart/form-data" onsubmit="set()">
<input type="hidden" id="hidden" name="username" value="" />
<table frame="void" cellpadding="5">
<tr>
<td><p class="word">作者名 ： </p></td>
<td><select name="penname" class="validate[required]">
<option value="">選択して下さい</option>
<script type="text/javascript">name00();</script>
</select></td>
<tr>
<td><p class="word">作品名 ： </p></td>
<td><input type="text" name="worktitle" size="20" class="validate[required,minSize[1],maxSize[10]]" /></td>
<tr>
<td>サムネイルファイル（幅300px以下) ： </td>
<td><input type="file" name="upfile" size="30" class="validate[required]" data-prompt-position="bottomLeft" accept=".png" /></td>
<tr>
<td><p class="word">投稿通知設定 ： </p></td>
<td>
<input type="radio" name="notice" value="0" class="validate[required]" id="notice1" checked="checked" /><label for="notice1"">通知しない</label>
<input type="radio" name="notice" value="1" class="validate[required]" id="notice2" /><label for="notice2"">通知する</label>
<td>
<tr>
<tr>
<td><BR><BR><BR></td><td></td>
<tr>
<td>
<input type="checkbox" class="validate[required] checkbox" name="checkbox1" id="checkbox1"><label for="checkbox1">内容を確認しました。</label><br><BR><br>
<input type="submit" name="button" value="イラストを投稿する！">
</td>
</table>
</form>
</body>
</html>

PHPtenmlate.js (text/javascript)

function name00(){
    var html = "";
    html += '<option value="あ">あ</option>';
    html += '<option value="い">い</option>';
    html += '<option value="う">う</option>';
    document.write(html);
}
function name01(){
    var html = "";
    html += '<option value="え">え</option>';
    html += '<option value="お">お</option>';
    html += '<option value="か">か</option>';
    document.write(html);
}

ファイル名から数字を取り出して、hiddenでIDを送信する部分はできたのですが…

ファイル名をhiddenで送信する

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="style.css" media="all">
<link rel="stylesheet" href="jQuality/css/validationEngine.jquery.css" type="text/css"/>
<script type="text/javascript">
var url = window.location.href;
var filename = url.match(".+/(.+?).[a-z]+([?#;].*)?$")[1];
function set() {
var var2 = document.getElementById('hidden');
var2.value = filename;
}
</script>
<title>フォーム</title>
</head>
<body>
<p class="title">フォーム</p>
<BR>
<form id="workform" action="form.php" method="post" enctype="multipart/form-data" onsubmit="set()">
<input type="hidden" id="hidden" name="username" value="" />
<BR>
<input type="submit" value="送信"/>
</form>
</body>
</html>

m.ts10806

2018/07/09 05:26

PHPtenmlate.js　はどこから呼び出されているのでしょうか。スペルミスもありそうですが、どこからも呼び出されている様子がありません。

m.ts10806

2018/07/09 05:27

それに、00.htmlが2つコード提示されていますが・・？

Inuha

2018/07/09 05:34

上の00.htmlは、header 内でjsファイルを呼び出しています。(text/javascriptを使って)

Inuha

2018/07/09 05:35

下の00.htmlはPHPtemplate.jsを使用していません。

Inuha

2018/07/09 05:38

両者共に動いてはいるのですが、上の00.htmlからファイル名に応じたJavaScript テンプレートの呼び出し方が分からなくて…

m.ts10806

2018/07/09 05:38

呼び出し部分がないと余計な詮索を強います。コードはなるべく関連性を分かるようにできれば全体を提示してください。00.htmlが2つコード提示されているため、余計に関係性が分からなくなっています。　　質問内容は編集できます。スペルミスもあるので修正をお願いします。

Inuha

2018/07/09 05:46

1番上の00.htmlを全文に差し替えました

Inuha

2018/07/09 14:02

解決しました！ありがとうございました。

行動規範の内容に同意します

回答1件

ベストアンサー

簡単にですが（未検証）

javascript
1$(function(){
2  var list = {
3    '00': ['あ', 'い', 'う'],
4    '01': ['え', 'お', 'か']
5  };
6  var filename = location.href.match(".+/(.+?).[a-z]+([?#;].*)?$")[1];
7  for (var value of list[filename]) {
8    $(':input[name=penname]').append('<option value="' + value + '">' + value + '</option>');
9  }      
10});

投稿2018/07/09 05:39

SakuBlade

総合スコア375

Inuha

2018/07/09 07:11

夜家で試してみます！

Inuha

2018/07/09 13:20

出来ました！ありがとうございました。

Inuha

2018/07/09 14:04

---------------- 00.html ---------------- <script nama="javascript" src="namelist.js"></script> <script name="javascript"> $(function(){ var list=test(); var filename = location.href.match(".+/(.+?).[a-z]+([?#;].*)?$")[1]; for (var value of list[filename]) { $(':input[name=penname]').append('<option value="' + value + '">' + value + '</option>'); } }); </script> ---------------- namelist.js ---------------- function test(){ var list={ '00': ['あ', 'い', 'う'], '01': ['え', 'お', 'か'] }; return list; }

行動規範の内容に同意します