Question

如何显示与我选择的值相对应的html页面？

  <select name="choix" class="form-control" onchange="showstuff(this.value);">
        <option id="fr" value="fr">France</option>
        <option id="be" value="be">Belgique</option>
        <option id="ch" value="ch">Suisse</option>
      </select>
    <div id="FormFr"></div>
    <div id="FormBe"></div>
    <div id="FormCh"></div>

    <script>
    $(document).ready(function() {
        if ($("select[name=choix] option:selected").val() == 'fr') {
            $("#FormFr").load("formFr.html");
        }
    });
    </script>

由于

Answer 1

使用jQuery change()事件处理程序，同时删除onchange="showstuff(this.value);"

<强> HTML

<select name="choix" class="form-control">
    <option id="fr" value="Fr">France</option>
    <option id="be" value="Be">Belgique</option>
    <option id="ch" value="Ch">Suisse</option>
  </select>
<div id="FormFr"></div>
<div id="FormBe"></div>
<div id="FormCh"></div>

<小时/> 的的jQuery

<script> $(document).ready(function() { $("select[name=choix]").change(function() { var opt = this.value; $('[id^=Form]').html(''); $("#Form" + opt).load("form" + opt + ".html"); }); }); </script>

Answer 2

我认为这段代码应该解决它：

<select name="choix" class="form-control">
    <option id="fr" value="Fr">France</option>
    <option id="be" value="Be">Belgique</option>
    <option id="ch" value="Ch">Suisse</option>
  </select>
<div id="FormFr"></div>
<div id="FormBe"></div>
<div id="FormCh"></div>

<script>
$(document).ready(function() {
    $("select[name=choix]").change(function() {
        var language = this.value;
        $("#Form" + language).load("form" + language + ".html");
    });
});
</script>

请注意，我已删除了＆＃39; onchange =＆＃34; showstuff（this.value）;＆＃34;＆＃39;，并且还将选项值首字母更改为大写。

JSFiddle：http://jsfiddle.net/ytpfdwyd/

Answer 3

我认为你不需要3个不同的div。

所以

<select name="choix" class="form-control">
    <option id="fr" value="fr">France</option>
    <option id="be" value="be">Belgique</option>
    <option id="ch" value="ch">Suisse</option>
</select>
<div id="FormPage"></div>

然后

jQuery(function ($) {
    var pages = {
        fr: 'formFr.html',
        be: 'formBe.html'
    }
    $('select[name="choix"]').change(function () {
        var value = $(this).vall();
        $('#FormPage').load(pages[value]);
        showstuff(value);
    })
});

function showstuff(element) {
    $('#fr, #be, #ch').each(function () {
        $(this).toggle(this.id == element)
    })
}

Answer 4

＆＃13;

$(document).ready(function() {
  $('select[name=choix]').on('change',function() {
    $('#Form' + this.value).load( 'form' + this.value + '.html' );
  })
  .change();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="choix" class="form-control">
  <option id="Fr" value="Fr">France</option>
  <option id="Be" value="Fe">Belgique</option>
  <option id="Ch" value="Ch">Suisse</option>
</select>
<div id="FormFr"></div>
<div id="FormBe"></div>
<div id="FormCh"></div>

＆＃13;

Answer 5

我通过服用大部分Arun P Johny来发布解决方案。如果您有更多，请随时发布。我有默认表格，点击时价格会根据国家/地区而变化。

<script type="text/javascript"> function showstuff(element){ document.getElementById("fr").style.display = element=="fr"?"block":"none"; document.getElementById("be").style.display = element=="be"?"block":"none"; document.getElementById("ch").style.display = element=="ch"?"block":"none"; } </script>

<div id="fr" class="details" style="display:block;margin:0 0 0 0;">
  <?php include "fr.php" ?>
</div>

<div id="be" class="details" style="display:none;margin:0 0 0 0;">
  <?php include "be.php" ?>
</div>

<div id="ch" class="details" style="display:none;margin:0 0 0 0;">
  <?php include "ch.php" ?>
</div>

<?php if(isset($reponse )){ echo $reponse ; } ?><br>
<select name="choix" class="form-control" onchange="showstuff(this.value);">
    <option id="fr" value="fr">France</option>
    <option id="be" value="be">Belgique</option>
    <option id="ch" value="ch">Suisse</option>
</select>
<div id="FormPage"></div>
<script>
jQuery(function ($) {
    $('#FormPage').load('formFr.php');
    var pages = {
        fr: 'formFr.php',
        be: 'formBe.php',
        ch: 'formCh.php'        
    }
    $('select[name="choix"]').change(function () {

        var value = $(this).val();
        $('#FormPage').load(pages[value]);
        showstuff(value);
    })
});
</script>

功能负载不起作用

5 个答案: