Question

我想根据客户选择的下拉菜单为客户提供样本PDF。

我创建了一个jsfiddle来尝试向您展示我想要实现的目标。

我的HTML：

<p>Please select from the options below to view a sample Investment Cost Analysis:</p>
<p>&nbsp;</p>
<p>
  <label for="type">* Combined Income:</label>
  <select name="income" id="income">
    <option selected="selected">- Please Select -</option>
    <option value="$30,000 - $80,000">$30,000 - $80,000</option>
    <option value="$80,000 - $180,000">$80,000 - $180,000</option>
    <option value="$180,000+">$180,000+</option>
  </select>
</p>
<p>
<label for="type">* Property Type:</label>
<select name="type" id="type">
  <option selected="selected">- Please Select -</option>
  <option value="house">House</option>
  <option value="unit">Apartment / Unit</option>
</select>
</p>
<p>
<label for="price">* Property Price:</label>
<select name="price" id="price">
  <option selected="selected">- Please Select -</option>
  <option value="$350,000">$350,000</option>
  <option value="$400,000">$400,000</option>
  <option value="$450,000">$450,000</option>
  <option value="$500,000">$500,000</option>
</select>
</p>
<p>
  <input type="submit" name="show" id="show" value="Show Sample" />
</p>

如何根据选择的选项进行设置，以显示正确的文件？我还想确保在Show Sample按钮工作之前选择 ALL 3 选项。

我知道这会占用一些JavaScript，但这就是我被困住的地方。我不知道从哪里开始使用JavaScript。

Answer 1

更改下拉功能时，更改链接的href

$("#mydropdown").change(function(e) {

var dropdown value = $("#mydropdown").value();

//switch condition 
if(){
$("mylink").attr("href", "your file path"); 
//TODO 
}else if (){

}

 });

Answer 2

这是一个非常简单的例子。

<强>更新显然，如果用户的浏览器没有PDF查看器，这将强制下载窗口。

<强> HTML ：

<select id="pdfs">
    <option value="http://example.com/docs1.pdf">PDF 1</option>
    <option value="http://example.com/docs2.pdf">PDF 2</option>
    <option value="http://example.com/docs3.pdf">PDF 3</option>
</select>

<强> JS ：

var selectElem = document.getElementById('pdfs');

selectElem.onchange = function() {
  window.location = selectElem[selectElem.selectedIndex].value;
};

Answer 3

试试这个：http://jsfiddle.net/9hqKN/2/

$('#show').hide();

$('select').change(function () {
  var income = $('#income').val();
  var type = $('#type').val();
  var price = $('#price').val();

  if (income == 0 || type == 0 || price == 0) {
    $('#show').hide();
  } else {
    $('#show').show();
  }
});

我在每个0

中为all first option添加了<select>值的编辑内容

如何根据所选的下拉选项显示文档

3 个答案: