Question

我尝试在select选项上显示外部内容div。这是示例

    <select>
      <option value="http://www.indiansuperleague.com/atletico-de-kolkata/squad/midfielder-3986-arata-izumi-playerprofile">ARATA
IZUMI</option>
      <option value="http://www.indiansuperleague.com/atletico-de-kolkata/squad/midfielder-10724-borja-fernandez-playerprofile">BORJA
FERNANDEZ</option>
      <option value="http://www.indiansuperleague.com/atletico-de-kolkata/squad/midfielder-10249-clifford-rayes-miranda-playerprofile">CLIFFORD
RAYES
MIRANDA</option>
    </select>
    <div id="content-display"></div>

选择时我想在<div class="player-detailswrap">内显示内容。第一个选项是默认选项。

请帮助

Answer 1

你需要选择更改事件，使用jquery get方法从选定的选项值url获取html，然后将返回的html设置为所需的div：

var content_display = $('#content-display');
$('select').change(function(){
    $.get(this.value, function( pagehtml ) {
      content_display.html( pagehtml );
    });
});

Answer 2

你好，你可以试试这个

$(select).on('change', function(){
  $(#content-display).text($(this).val());
})

Answer 3

（如果您对使用jquery感到满意）

$("#select_id").on("input", function(e){
  $("#content-display").text($(this).val())
});

这里有fiddle个工作。 on最适合倾听事件。

Answer 4

假设您想要从url.Use Ajax加载内容，可以轻松加载内容而无需重新加载页面。

var toggleContents = document.querySelectorAll('.toggleContent');

if (toggleContents) {

  for (var i = 0; i < toggleContents.length; i++) {
    toggleContents[i].addEventListener('change', changeContent, false);
  }

}

function changeContent() {
  var content = document.querySelector(this.dataset.content);
  if (content) {

    var xhttp = new XMLHttpRequest();

    var url_id = '#main-content';

    xhttp.onreadystatechange = function() {
      if (xhttp.readyState == 4 && xhttp.status == 200) {
        content.innerHTML = xhttp.responseText;
      }
    };
    xhttp.open("GET", this.value + url_id, true);
    xhttp.send();


  }

}

<select class='toggleContent' data-content='#content-display'>

  <option value="https://developer.mozilla.org/en-US/docs/Web/JavaScript">Content 1</option>

  <option value="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">Content 2</option>

  <option value="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays">content 3</option>

  <option value="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">Content 4</option>
</select>

<div id="content-display"></div>

Answer 5

如果您想要这样做，您可以使用jQuery AJAX GET或加载请求，只需从页面中提供您想要的内容的选择器。唯一的问题是，由于跨域策略，您必须在同一个域中。

您可以查看文档中的jQuery Load

$(document).load('test.html #container', fucn...) // Returns #container

Answer 6

在选择更改事件：

获取所选的选项值。
使用此值作为src属性创建iframe。
并将其附加到您的div。

这是你要走的路：

＆＃13;

function displayOption(select) {
  var frame = document.createElement("iframe");
  frame.src = select.value;
  document.getElementById("content-display").innerHTML = "";
  document.getElementById("content-display").appendChild(frame);
}

＆＃13;

<select onchange="displayOption(this)">
  <option value="http://example.com/1">Content 1</option>
  <option value="http://example.com/2">Content 2</option>
  <option value="http://example.com/3">content 3</option>
  <option value="http://example.com/4">Content 4</option>
</select>
<div id="content-display"></div>

＆＃13;

这是一个jquery解决方案：

＆＃13;

//This code will initialize the div content
//You can use an id with the select if you have many dropdowns in the page
var dropdown = document.getElementsByTagName("select")[0];
$('#content-display').load(dropdown.options[0].value);

function displayOption(select) {
  $('#content-display').load(select.value);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<select onchange="displayOption(this)">
  <option value="http://example.com/1">Content 1</option>
  <option value="http://example.com/2">Content 2</option>
  <option value="http://www.google.com">content 3</option>
  <option value="http://example.com/4">Content 4</option>
</select>
<div id="content-display"></div>

＆＃13;

修改

要回答有关从其他页面加载div内容的问题：

如果您需要加载外部div内容，可以使用：

function displayOption(select) { $('#content-display').load(select.value+" #other-page-div-id"); }

Answer 7

此处the solution

$('#content').change(function() {
    $('#content-display').html($(this).val())
});

Answer 8

我希望您的问题能解决，请使用以下代码。如果我的答案适合您的问题，请投票给我。

＆＃13;

$(document).ready(function () {
    $('#ddlOption').change(function () {
var val=$("#ddlOption").val();
$("#content-display").html('');
   $("#content-display").append(val)
  })
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<select id="ddlOption">
  <option value="http://example.com/1">Content 1</option>
  <option value="http://example.com/2">Content 2</option>
  <option value="http://example.com/3">content 3</option>
  <option value="http://example.com/4">Content 4</option>
</select>
<div id="content-display"></div>

＆＃13;

Answer 9

您可以使用jQuery来更轻松地完成这些工作：

因此，由于 Access-Control-Allow-Origin ，可能无法加载内容，当您尝试访问您不拥有或不受限制的网址时会发生这种情况。

检查此处的代码

jQuery(document).ready(function(){
		jQuery("#select-content").change(function(){
    		var content_url = jQuery("#select-content option:selected").val();
    		if(content_url){
        		jQuery("#content-display").load(content_url);
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="select-content">
  <option value="">-- select content --</option>
  <option value="http://example.com/1">Content 1</option>
  <option value="http://example.com/2">Content 2</option>
  <option value="http://example.com/3">content 3</option>
  <option value="http://example.com/4">Content 4</option>
</select>
<div id="content-display"></div>

Answer 10

实现这一目标的最佳方法是使用一些简单的jQuery函数。在此示例中，有4个div，每个div具有不同的内容。默认情况下都隐藏了所有内容。

然后你可以使用一些jQuery隐藏并根据你做出的选择显示某些div：

$(document).ready(function(){
  $('.hidden').hide();
  $('#dropdown').on('change', function() {
      if (this.value == 'defaultoption') {
        $('.hidden').hide();
      }
      else if (this.value == 'select1') {
        $('.hidden').hide();
        $("#content1").show();
      }
      else if (this.value == 'select2') {
        $('.hidden').hide();
        $("#content2").show();
      }
      else if (this.value == 'select3') {
        $('.hidden').hide();
        $("#content3").show();
      }
      else if (this.value == 'select4') {
        $('.hidden').hide();
        $("#content4").show();
      }
      else
      {
        $("#content-display").hide();
      }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropdown">
  <option value="defaultoption">Select Content</option>
  <option value="select1">Content 1</option>
  <option value="select2">Content 2</option>
  <option value="select3">Content 3</option>
  <option value="select4">Content 4</option>
</select>

<div id="content-display">
  <div id="content1" class="hidden">This is some text for content 1</div>
  <div id="content2" class="hidden">This is some text for content 2</div>
  <div id="content3" class="hidden">This is some text for content 3</div>
  <div id="content4" class="hidden">This is some text for content 4</div>
</div>

希望这有帮助！

从外部div中选择并显示内容

10 个答案: