Question

任务：

创建一个下拉列表，其中包含供用户选择的选项。当用户从下拉列表中选择一个选项时。将自动显示一个附加字段以显示用户选择的选项。

已完成的工作： 下拉列表已经创建，它显示了供用户选择的选项列表。我还设法在选择作为条件语句一部分的选项中显示通过硬编码选择的选项。

问题： 我如何能够允许条件语句从所选的下拉列表中读取而不是我在值中硬编码。

代码：

DropDown代码：

  <li class="bigfield">
                    <select name ="Agency" id="AgencyDetails" onchange = "return val(this.value);">
                    <option value ="0" selected = "selected"> Select Agency..</option>
                    <option value ="Name 1"> Name1</option>
                    <option value ="Name 2"> Name2</option>
                    <option value ="Name 3"> Name3</option>
                    <option value = "Others"> Others</option>
            </li>

条件语句，以查看已选择的选项：

<script>
function val(x) {
    document.getElementById("AddDiv").style.display = x == "Others" ? "block" : "none";
    document.getElementById("Name1").style.display = x == "Name 1" ? "block" : "none";
    document.getElementById("Name2").style.display = x == "Name 2" ? "block" : "none";
    document.getElementById("Name3").style.display = x == "Name 3" ? "block" : "none";
}
</script>

所选选项的硬编码视图：

<div  id = "Name1" style ="display:none">
            <li class ="bigfield"><input placeholder="Agent1" type="text" name="agentName" id="agentName" <?php echo 'value="Agency 1"'?> disabled="disabled"/></li>
            </div>
.....(identical for Name2 and Name3)

Answer 1

使用jQuery，这很简单。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name ="Agency" id="AgencyDetails">
   <option value ="0" selected = "selected"> Select Agency..</option>
   <option value ="Name 1"> Name1</option>
   <option value ="Name 2"> Name2</option>
   <option value ="Name 3"> Name3</option>
   <option value = "Others"> Others</option>
 </select>
<div id="result"></div>

<script>
    $(function(){
       // above code here
    });
</script>

以上代码将放在$(document).ready(..)内，如此：

pass

Answer 2

为了简化代码，请尝试修改HTML并使<option>值等于您希望显示的id <div>。

$("div.result").hide();
$("select#AgencyDetails").change(function(){
  var selectedVal = $(this).val();
  $("div.result").hide();
  $("div#"+selectedVal).show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul>
<li class="bigfield">
  <select name ="Agency" id="AgencyDetails" ">
     <option value ="0" selected = "selected">Select Agency..</option>
     <option value ="Agency1"> Name1</option>
     <option value ="Agency2"> Name2</option>
     <option value ="Agency3"> Name3</option>
     <option value = "Others"> Others</option>
  </select>
</li>
</ul>
<div class="result" id = "Agency1" style ="display:none;">
     <li class ="bigfield"><input placeholder="Agent1" type="text" name="agentName" id="agentName" disabled="disabled"/></li>
</div>
                                                                                   
<div  class="result" id = "Agency2" style ="display:none;">
     <li class ="bigfield"><input placeholder="Agent2" type="text" name="agentName" id="agentName" disabled="disabled"/></li>                                                         </div>
                                                                                   <div  class="result" id = "Agency3" style ="display:none;">
     <li class ="bigfield"><input placeholder="Agent3" type="text" name="agentName" id="agentName" disabled="disabled"/></li>
</div>

Answer 3

使用jQuery Foo和use std::{ collections::HashMap, sync::{Arc, Mutex}, thread, time::Duration, }; #[derive(Debug)] struct A { foo: u8, } trait Foo: Send { fn get_foo(&self) -> u8; } impl Foo for A { fn get_foo(&self) -> u8 { self.foo } } fn main() { let a = Arc::new(Mutex::new(A { foo: 8 })); let mut map: HashMap<u8, Arc<Mutex<Foo>>> = HashMap::new(); map.insert(8u8, a); for _ in 0..2 { let a = map.get(&8u8).expect("boom").clone(); thread::spawn(move || { let result = a.lock().ok().expect("boom indeed").get_foo(); println!("Result: {}", result); }); } thread::sleep(Duration::from_millis(200)); }：

eq()

selectedIndex

使用var details; var agencyChanged = function(e) { details.hide(); var i = this.selectedIndex; if (0 === i) return; var toShow = details.eq(i) if (!toShow.length) toShow = details.eq(0); toShow.show(); }; $(function() { details = $('div.details'); $('#AgencyDetails').on('change keyup', agencyChanged).trigger('change'); });属性：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select name="Agency" id="AgencyDetails">
  <option value="0">Select Agency..</option>
  <option value="Name 1">Name1</option>
  <option value="Name 2">Name2</option>
  <option value="Name 3">Name3</option>
  <option value="Others">Others</option>
</select>
<div id="AddDiv" class='details'>
  <li class="bigfield">
    <input placeholder="AddDiv" type="text" name="agentName" />
  </li>
</div>
<div id="Name1" class='details'>
  <li class="bigfield">
    <input placeholder="Name1" type="text" name="agentName" disabled="disabled" />
  </li>
</div>
<div id="Name2" class='details'>
  <li class="bigfield">
    <input placeholder="Name2" type="text" name="agentName" disabled="disabled" />
  </li>
</div>
<div id="Name3" class='details'>
  <li class="bigfield">
    <input placeholder="Name3" type="text" name="agentName" disabled="disabled" />
  </li>
</div>

data

如何从下拉列表中显示所选选项

3 个答案: