Question

根据用户类型，我的页面会动态创建一个select元素（供管理员更改）或一个具有相同ID的div文本（供普通用户使用）。

if ($user_type == 'admin') {
    echo "<tr><td>Type:</td><td><select id='type' >";
    echo "<option value='student' >student</option><option value='teacher' >teacher</option>";
    echo "</select></td></tr>";
}
else echo "<tr><td>Type:</td><td><div id='type'>" . $user_type . "</div></td></tr>";

提交页面时，我需要select元素中的.val（）或div元素中的.text（）。

我不能在div元素上使用.val（），也不能在select元素上使用.text（）。

jQuery / javascript中是否有一种方法可以获取一个或另一个，这取决于创建的元素类型？

Answer 1

按其他方式制作else语句（使用input [type = hidden]，以使用.val（））

else echo
"<tr>
  <td>Type:</td>
  <td>
    <!-- div to show the value -->
    <div>$user_type</div>
    <!-- hidden input type to get the value via jQuery .val() -->
    <input type='hidden' id='type' value='$user_type'>
  </td>
</tr>";

哦，您可以在用双引号echo "$someVar";定义的字符串中使用PHP变量

Answer 2

由于您是从PHP打印出HTML输出，因此您可以同时打印一个Javascript变量，该变量具有使用哪种方法来获取值/文本。然后，使用Javascript中的变量执行一个查询或其他查询。

类似：

if ($user_type == 'admin') {
    echo "<tr><td>Type:</td><td><select id='type' >";
    echo "<option value='student' >student</option><option value='teacher'>teacher</option>";
    echo "</select></td></tr>";
    echo "<script> var method = 'val'</script>";
}
else 
{ 
    echo "<tr><td>Type:</td><td><div id='type'>" . $user_type . "</div></td></tr>";
    echo "<script> var method = 'text'</script>";
}

Answer 3

您可以使用javascript中的以下简单代码进行检查：

{
   "data":[
      {
         "id":22535,
         "message":"Message1",
         "message_type":"tag1",
         "time":"2018-08-13T14:41:57Z",
         "username":"rahuln"
      },
      {
         "id":22534,
         "message":"Message2",
         "message_type":"tag2",
         "time":"2018-08-13T14:02:27Z",
         "username":"govindp"
      },
      ..................
   ],
   "error":null,
   "success":true
}

Answer 4

您可以使用$(selector).prop('tagName')获取标签的名称，并相应地使用.val()或.text()。您也可以在纯Javascript中使用document.getElementById(id).nodeName。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="test"></select>
<script>
console.log($('#test').prop('tagName'));
console.log(document.getElementById('test').nodeName);
</script>

您还可以使用三元运算符在将值分配给变量之前检查该值是否未定义。

var value = $('#type').val()!==undefined?$('#type').val():$('#type').text();

演示：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="createTag">
<option value="select">Select</option>
<option value="div">Div</option>
</select>
<br/>
<input type="text" placeholder="Enter value or text or element" id="val"/>
<br/>
<button onClick="createTag()">Create Tag</button>
<button onClick="getValueOfType()">Get Value</button>
<p/>
<script>
function createTag(){
   var tag = $('#createTag').val();
   $('#type').remove();
   var elem = document.createElement(tag);
   var val = $('#val').val();
   if(tag=="select"){
    elem.innerHTML = "<option value='"+val+"' selected>"+val+"</option>";
   } else {
      elem.textContent = val;
   }
   elem.id = "type";
   document.body.appendChild(elem);
}
function getValueOfType(){
  var elem = $('#type');
  if(!elem.length){
    alert("No element created yet.");
  } else {
    if(elem.prop('tagName')=="SELECT"){
      alert(elem.val());
    } else {
      alert(elem.text());
    }
  }
}
</script>

Answer 5

您可以使用简单优雅的三元条件获取文本或值：

var result = $("#type").val() !== undefined ? $("#type").val() : $("#type").text();

如何从具有相同ID的动态创建的元素中选择.val（）或div .text（）？

5 个答案: