두 개의 html 파일 인 file-1.htm과 file-2.htm이 있습니다. test.htm이라는 또 다른 html 파일에 "Load Sample-1"및 "Load Sample-2"라는 두 개의 값이있는 드롭 다운이 있습니다.하나의 HTML 파일을 다른 HTML 파일에 동적으로 삽입 하시겠습니까?
이것은 내가 시도한 것입니다 : "Load Sample-1"을 드롭 다운에서 선택하면 file.htm이 test.htm의 중첩 된 HTML로로드되어야합니다.
지금 당장 나는 javascript를 통해 test.htm 안에 file-1.htm 및 file-2.htm의 내용을 넣을 수있다. 드롭 다운이 커지면 Bt가 커지고 test.htm이 커집니다. 드롭 다운의 각 항목에 대해 별도의 html 파일을 작성하면 어떻게됩니까?
그냥 <iframe>을 사용하고 JavaScript가 iframe의 소스를 동적으로 변경하지 않는 이유는 무엇입니까? 여기
<html>
<head>
<script type="text/javascript">
var changePage = function() {
var iframe = document.getElementById("myiframe"); // One of the many ways to select your iframe
var select = document.getElementById("pageselected");
var url = select.options[select.selectedIndex].value;
iframe.src = url;
}
</script>
</head>
<body>
<select id="pageselected">
<option value="page1.html">Page 1</option>
<option value="page2.html">Page 2</option>
</select>
<input type="button" onclick="changePage()" value="Change Page" />
<iframe id="myiframe"></iframe>
</body>
</html>
<select>에 대한
onchange을 사용 않았다 "자신을 요청 할 수있다 음, 내가가는 작은 전쟁이있어
? <select> + onchangeI detail here,하지만 기본적으로 인터넷 익스플로러 6 또는 7 (이 여전히 8 깨진 경우 확실하지 않음)
드롭 다운 만약 사용하고있는 키보드 전용 사용자에 대한 귀하의 웹 사이트에 완전히 액세스 할 수 있습니다 사용에 "거대한"다음 나는 더 이상 usin 제안하지 것입니다 기존의 자동 완성 상자를 드롭 다운하여 원하는 언어로 찾을 수 있습니다.
수백, 수백 개의 옵션이있는 경우 드롭 다운은 더 이상 적절한 양식 요소가 아닙니다.
AJAX를 사용하여이를 수행 할 수 있습니다. 기술을 소개 할 수있는 million different AJAX tutorials이 있습니다. 당신이 JQuery와 사용하는 경우
그들은 멋진 기능 JQuery와 ('# div의')를 가지고있다. 부하() http://jquery.com/ http://docs.jquery.com/Ajax/load
큰 작품도 GET과 POST 매개 변수를 지원합니다.
링크를 가져 주셔서 감사합니다. –
+1 - 나는 이것이 효과를 달성하는 가장 단순한 방법이라고 생각합니다. –
답해 주셔서 감사합니다. 어떻게 다른 HTML 파일에 대한 URL을 바꿀까요? 전체 자바 스크립트 파일이 어떻게 보이는지 보여 주시겠습니까? – user32262
좀 더 자세한 예제로 답변을 업데이트했습니다. –