JQuery设置要在标题之前打印的下拉菜单值的全局变量

时间:2014-05-22 03:06:37

标签: javascript jquery global-variables

我正在尝试抓取下拉菜单的值并在部分标题之前打印它。为此,我需要检测下拉列表的更改,抓取所选文本,然后将其打印到全局变量。

jQuery(document).on('change', '#select_540', function(e) {
globalvar disMetalType = console.log(this.options[e.target.selectedIndex].text);
}

在我插入的地方,我有这个。

<h1 id="custom_product_name">
<script type="text/javascript">
 document.write (disMetalType);
</script>
<?php echo $_product->getNameCustom(); ?></h1>

我可以使用一些帮助。我曾就同一问题提出过以前的问题,但做了一些研究,尝试了不同的攻击角度。

4 个答案:

答案 0 :(得分:1)

似乎应该使用以下代替document.write

jQuery('#custom_product_name').text(disMetalType);

答案 1 :(得分:1)

您希望将插入作为更改时触发的代码的一部分。只有在加载文件后才会调用document.write,之后不再调用。

所以在你的例子中:

jQuery(document).on('change', '#select_540', function(e) {
   globalvar disMetalType = console.log(this.options[e.target.selectedIndex].text);
   //find the element you are trying to change:
   $('#custom_product_name').prepend(this.options[e.target.selectedIndex].text + ' ');
}

为了避免当有人更改下拉列表并重复添加值时会出现的问题我建议将html更改为:

<h1 id="custom_product_name">
<span id="placeholder"></span> <?php echo $_product->getNameCustom(); ?></h1>

然后将id加载到span:

jQuery(document).on('change', '#select_540', function(e) {
   globalvar disMetalType = console.log(this.options[e.target.selectedIndex].text);
   //find the element you are trying to change:
   $('#placeholder').html(this.options[e.target.selectedIndex].text);
}

答案 2 :(得分:1)

我假设目的是让所选的选项文本出现在<h1>中。如果是这种情况,那么为什么不在你的.on()回调中执行此操作:

var disMetalType = console.log(this.options[e.target.selectedIndex].text);
$('#custom_product_name span').text(disMetalType);

这需要将<h1>更改为:

<h1 id="custom_product_name">
<span></span>
<?php echo $_product->getNameCustom(); ?>
</h1>

答案 3 :(得分:1)

您想要根据下拉菜单的选择更改标题文字。请尝试以下方法:(这只是一个例子,请根据您的要求进行更改)

HTML:

<select id="dropdown">
    <option value="black">black</option>
    <option value="white">white</option>
    <option value="green">green</option>
    <option value="blue">blue</option>
</select>
<div id="title">this is the title</div>

使用Javascript:

$('#dropdown').on('change', function(){
    $('#title').html('this is the title : ' + $(this).val());
});