Javascript 我无法将下拉列表的默认值设置为最后一项

我无法将下拉列表的默认值设置为最后一项。如果下拉列表中有3项，我希望第三项是下拉列表的默认项。 填充下拉列表的html

<div class='select'>
<select id='videoSource'></select>
</div>

javascript打开相机并在pc上显示可用的相机。有人能帮我吗

<script type="text/javascript">

var videoElement = document.querySelector("video");
var videoSelect = document.querySelector("select#videoSource");
var startButton = document.querySelector("button#start");

navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

function gotSources(sourceInfos) {
    for (var i = 0; i != sourceInfos.length; ++i) {
        var sourceInfo = sourceInfos[i];
        var option = document.createElement("option"); 
        option.value = sourceInfo.id;
        if (sourceInfo.kind === 'video') {
            option.text = sourceInfo.label || 'camera ' + (videoSelect.length + 1);
            videoSelect.appendChild(option);                   
        } else {
            console.log('Some other kind of source: ', sourceInfo);
        }
    }
}

if (typeof MediaStreamTrack === 'undefined') {
    alert('This browser does not support MediaStreamTrack.\n\nTry Chrome Canary.');
} else {
    MediaStreamTrack.getSources(gotSources);
}


function successCallback(stream) {
    window.stream = stream; // make stream available to console
    videoElement.src = window.URL.createObjectURL(stream);
    videoElement.play();

  }

function errorCallback(error) {
    console.log("navigator.getUserMedia error: ", error);
}

function start() {
    if (!!window.stream) {
        videoElement.src = null;
        window.stream.stop();
    }

    var videoSource = videoSelect.value;
    var constraints = {
        video: {
            optional: [{ sourceId: videoSource}]
        }
    };
    navigator.getUserMedia(constraints, successCallback, errorCallback);
}


videoSelect.onchange = start;

start();

var videoElement=document.querySelector（“视频”）；
var videoSelect=document.querySelector（“选择#视频源”）；
var startButton=document.querySelector（“按钮#开始”）；
navigator.getUserMedia=navigator.getUserMedia||
navigator.webkitGetUserMedia | | navigator.mozzetusermedia；
函数gotSources（sourceInfos）{
对于（变量i=0；i！=sourceInfos.length；++i）{
var sourceInfo=sourceInfos[i]；
var option=document.createElement（“选项”）；
option.value=sourceInfo.id；
如果（sourceInfo.kind==='video'）{
option.text=sourceInfo.label | |“camera”+（videoSelect.length+1）；
videoSelect.appendChild（选项）；
}否则{
log（'某种其他类型的源：'，sourceInfo）；
}
}
}
如果（MediaStreamTrack的类型=='undefined'）{
警报（'此浏览器不支持MediaStreamTrack。\n\n请尝试Chrome Canary'）；
}否则{
MediaStreamTrack.getSources（gotSources）；
}
函数成功回调（流）{
window.stream=stream；//使流对控制台可用
videoElement.src=window.URL.createObjectURL（流）；
videoElement.play（）；
}
函数errorCallback（错误）{
log（“navigator.getUserMedia错误：”，错误）；
}
函数start（）{
如果（！！window.stream）{
videoElement.src=null；
window.stream.stop（）；
}
var videoSource=videoSelect.value；
变量约束={
视频：{
可选：[{sourceId:videoSource}]
}
};
getUserMedia（约束、successCallback、errorCallback）；
}
videoSelect.onchange=开始；
start（）；

---

最简单的解决方案是在gotSources函数中添加新选项后，添加

videoSelect.value = sourceInfo.id;

所以应该是这样的

    if (sourceInfo.kind === 'video') {
        option.text = sourceInfo.label || 'camera ' + (videoSelect.length + 1);
        videoSelect.appendChild(option);                   
        videoSelect.value = sourceInfo.id; //update the value to the last element
    } else {
        console.log('Some other kind of source: ', sourceInfo);
    }

这将为添加的每一个新选项设置它（不是最“高效”的解决方案，但肯定不会导致性能下降）。如果要发出value set命令一次，则需要存储最后添加的选项，并将其设置在for循环之外

同样，可能不值得这么做，但您可以选择。

对于最后一个选项，请在For循环中将

selected

属性设置为

true

---

sourceInfos中的最后一个元素可能没有kind=='video'，在这种情况下，它将不会出现在选择列表中。@isick maybe。但确切地说，关于最后一个选项，以上是明智的解决方案。另外，仅使用

selected

属性，我们就可以知道默认元素。希望您能理解。我理解您对使用所选属性的偏好，但您查找最后一个选项的算法不充分。其他试图实施您的解决方案的人必须了解它有明显的（并且可以避免的）失败案例。

if( i == sourceInfos.length - 1 ) {
    option.selected = true;
}